API tools faq
paste
glenthemes

Theme [05]: Asphyxia [dark ver.]

glenthemes
Apr 6th, 2019 (edited)
12,951
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 73.40 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------
  2. Theme [05]: Asphyxia [dark version]
  3. Made by glenthemes
  4.  
  5. Light version: pastebin.com/5sALi8Pf
  6.  
  7. Initial release: 2015/08/25
  8. Major update: 2021/11/06
  9. Last updated: 2025/06/10
  10.  
  11. What's new:
  12. ✱ minor updates for npf quotes and chats
  13.  
  14. TERMS OF USE:
  15. 1) Do not remove the theme credit.
  16. 2) Do not repost/redistribute my themes.
  17. 3) Do not take parts of the code and use it as your own.
  18. 4) Do not use my themes as a base code.
  19. 5) Do not mix my themes together.
  20.  
  21. CREDITS:
  22. ಇ(ꈍᴗꈍ)ಇ ~ glencredits.tumblr.com/asphyxia
  23. ----------------------------------------------------->
  24. <!DOCTYPE html>
  25. <html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" portrait="{PortraitURL-64}" sb-shad="{select:desc box shadow}">
  26.  
  27. <head>
  28.  
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32. {block:Description}
  33. <meta name="description" content="{MetaDescription}">
  34. {/block:Description}
  35.  
  36. <!-------- FONTS -------->
  37. <!-- google fonts -->
  38. <link href="//fonts.googleapis.com/css?family=Work+Sans|Cousine|Libre+Franklin|Open+Sans|Manrope:500|Karla|Rubik|IBM+Plex+Sans" rel="stylesheet">
  39.  
  40. <!-------- ICON FONTS -------->
  41. <!-- phosphor icons -->
  42. <link rel="stylesheet" href="//unpkg.com/[email protected]/src/css/phosphor.css">
  43.  
  44. <!-- cappucicons -->
  45. <link href="//cappuccicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  46.  
  47. <!-- basicons -->
  48. <script src="//glenthemes.github.io/basicons/init-icons.js"></script>
  49. <link href="//glenthemes.github.io/basicons/style.css" rel="stylesheet">
  50.  
  51. <!-------- PRELOAD -------->
  52. <link rel="preload" href="{image:sidebar background}" as="image">
  53. <link rel="preload" href="//glen-assets.github.io/fonts/LT Emphasis.ttf" as="font">
  54. <link rel="preload" href="//glen-assets.github.io/fonts/Roxborough-CF-Thin.ttf" as="font">
  55.  
  56. <!-------- JQUERY -------->
  57. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  58.  
  59. <!-------- THEME SCRIPTS -------->
  60. <script src="//npf-images-v3.github.io/script.js"></script>
  61. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  62.  
  63. <link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  64.  
  65. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  66.  
  67. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  68. <script src="//glen-themes.gitlab.io/thms/05/hahahaise.js"></script>
  69. <script src="//glen-themes.gitlab.io/thms/05/oshiete-yo.js"></script>
  70. <link href="//glen-themes.gitlab.io/thms/05/993.css" rel="stylesheet">
  71.  
  72. <!-- unblue polls -->
  73. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  74. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  75. <style>
  76. .poll-post {
  77. --Poll-Question-Font-Size: var(--Body-Font-Size);
  78.  
  79. --Poll-Option-Background-Color: {color:post};
  80. --Poll-Option-Corner-Rounding: 5px;
  81. --Poll-Option-Border-Size: 1px;
  82. --Poll-Option-Border-Color: {color:post borders inner};
  83. --Poll-Option-Padding: 10px;
  84. --Poll-Option-Font-Size: var(--Body-Font-Size);
  85. --Poll-Option-Spacing: 10px;
  86. --Poll-Option-Text-Color: {color:text};
  87.  
  88. --Poll-Option-HOVER-Border-Color: {color:special border};
  89. --Poll-Option-HOVER-Background-Color: {color:special background};
  90. --Poll-Option-HOVER-Text-Color: {color:special text};
  91. --Poll-Option-HOVER-Speed: 0.4s;
  92. }
  93.  
  94. .poll-see-results {
  95. padding-bottom:0!important;
  96. border-bottom:none!important;
  97. font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
  98. text-transform:uppercase;
  99. letter-spacing:0.5px;
  100. }
  101. </style>
  102.  
  103. <!-- npf audio player -->
  104. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  105. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  106. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  107. <script>
  108. tumblr_npf_audio({
  109. emptyTitleText: "Untitled track",
  110. emptyArtistText: "Untitled artist",
  111. emptyAlbumText: "Untitled album",
  112.  
  113. titleLabel: "",
  114. artistLabel: "",
  115. albumLabel: ""
  116. });
  117. </script>
  118. <style edit-npf-audio-player>
  119. .npf-audio-wrapper {
  120. --NPF-Audio-Buttons-Size: var(--Audio-Post-Buttons-Size);
  121. --NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
  122. --NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
  123. --NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
  124. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Size);
  125. --NPF-Audio-Image-Spacing: 0px;
  126.  
  127. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  128. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  129. }
  130.  
  131. .npf-audio-wrapper {
  132. position:relative;
  133. background:{color:special background};
  134. z-index:0;
  135. }
  136.  
  137. .npf-audio-background {
  138. margin-left:var(--p);
  139. }
  140.  
  141. .npf-audio-play, .npf-audio-pause {
  142. position:relative;
  143. z-index:0;
  144. }
  145.  
  146. .npf-audio-play:after, .npf-audio-pause:after {
  147. content:"";
  148. position:absolute;
  149. top:0;left:0;
  150. margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding));
  151. margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
  152. width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  153. height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
  154. background:var(--Audio-Post-Buttons-Background);
  155. border-radius:100%;
  156. z-index:-1;
  157. }
  158.  
  159. .npf-audio-play svg { margin-left:1px; }
  160. .npf-audio-pause svg { margin-left:0; }
  161.  
  162. figcaption.audio-caption,
  163. figcaption.audio-caption ~ audio[controls]{
  164. display:none;
  165. }
  166.  
  167. .npf-audio-image {
  168. position:absolute;
  169. top:0;left:0;
  170. z-index:-1;
  171. }
  172. </style>
  173.  
  174. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  175. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  176.  
  177. <!-------- CUSTOMIZE PANEL OPTIONS -------->
  178. <!-- hi if you're reading this click the back arrow to edit! -->
  179. <meta name="image:sidebar background" content="//64.media.tumblr.com/7f22deb741869ea0067febf9aad7cff3/887257d6dea635d7-07/s2048x3072/a47a341a9b905f7dee9fd84ba5f68dbd01532ae7.png">
  180. <meta name="image:background image" content="//64.media.tumblr.com/ef3340d18d7e40c6509164fc7edae70a/aa56c24116a90bd2-c4/s2048x3072/67d759b47732934aa504e6b12e2f6f8bafb9e4e1.png">
  181.  
  182. <meta name="color:music player bg" content="#171717">
  183. <meta name="color:music player text" content="#bab1af">
  184.  
  185. <meta name="color:sidebar background" content="#000007">
  186.  
  187. <meta name="color:navlinks bg" content="#000007">
  188. <meta name="color:navlinks text" content="#c8bdbb">
  189. <meta name="color:navlinks border" content="#383838">
  190. <meta name="color:navlinks shadow" content="#000">
  191.  
  192. <meta name="color:desc bg" content="#000007">
  193. <meta name="color:desc border" content="#222">
  194. <meta name="color:desc box shadow" content="#000">
  195. <meta name="color:desc text" content="#c0b8b7">
  196. <meta name="color:desc hyperlinks" content="#fa8072">
  197.  
  198. <meta name="color:customlinks bar bg" content="#000007">
  199. <meta name="color:customlink 1 circle" content="#593f38">
  200. <meta name="color:customlink 2 circle" content="#7c483e">
  201. <meta name="color:customlink 3 circle" content="#895641">
  202. <meta name="color:customlink 4 circle" content="#aa6954">
  203. <meta name="color:customlink 5 circle" content="#a7716c">
  204. <meta name="color:customlink 6 circle" content="#e2897f">
  205. <meta name="color:customlink 7 circle" content="#ff896c">
  206. <meta name="color:customlink 8 circle" content="#fa8072">
  207. <meta name="color:customlink 1 hover" content="#d55746">
  208. <meta name="color:customlink 2 hover" content="#d55746">
  209. <meta name="color:customlink 3 hover" content="#d55746">
  210. <meta name="color:customlink 4 hover" content="#d55746">
  211. <meta name="color:customlink 5 hover" content="#d55746">
  212. <meta name="color:customlink 6 hover" content="#d55746">
  213. <meta name="color:customlink 7 hover" content="#d55746">
  214. <meta name="color:customlink 8 hover" content="#d55746">
  215.  
  216. <meta name="color:background" content="#020202">
  217.  
  218. <meta name="color:post" content="#070707">
  219. <meta name="color:text" content="#a2a2a2">
  220. <meta name="color:special background" content="#131313">
  221. <meta name="color:special text" content="#a2a2a2">
  222. <meta name="color:special border" content="#191919">
  223. <meta name="color:link" content="#b99c86">
  224. <meta name="color:post borders outer" content="#222">
  225. <meta name="color:post borders inner" content="#222">
  226. <meta name="color:reblogger" content="#ab918d">
  227.  
  228. <meta name="color:tags" content="#ab918d">
  229. <meta name="color:permalink" content="#b1a29f">
  230. <meta name="color:permalink background" content="#070707">
  231. <meta name="color:permalink border" content="#222">
  232. <meta name="color:post buttons" content="#b1a29f">
  233. <meta name="color:like button liked" content="#ff5254">
  234.  
  235. <meta name="color:scrollbar" content="#444">
  236. <meta name="color:scrollbar background" content="#020202">
  237.  
  238. <meta name="color:text selection background" content="#2b2524">
  239. <meta name="color:text selected" content="#aea3a2">
  240.  
  241. <meta name="select:sidebar width" title="475px" content="475px">
  242. <meta name="select:sidebar width" title="375px" content="375px">
  243. <meta name="select:sidebar width" title="400px" content="400px">
  244. <meta name="select:sidebar width" title="425px" content="425px">
  245. <meta name="select:sidebar width" title="450px" content="450px">
  246. <meta name="select:sidebar width" title="500px" content="500px">
  247. <meta name="select:sidebar width" title="525px" content="525px">
  248. <meta name="select:sidebar width" title="550px" content="550px">
  249.  
  250. <meta name="select:sidebar background position" title="bottom left" content="bottom left">
  251. <meta name="select:sidebar background position" title="top left" content="top left">
  252. <meta name="select:sidebar background position" title="top center" content="top center">
  253. <meta name="select:sidebar background position" title="top right" content="top right">
  254. <meta name="select:sidebar background position" title="center left" content="center left">
  255. <meta name="select:sidebar background position" title="center center" content="center center">
  256. <meta name="select:sidebar background position" title="center right" content="center right">
  257. <meta name="select:sidebar background position" title="bottom center" content="bottom center">
  258. <meta name="select:sidebar background position" title="bottom right" content="bottom right">
  259.  
  260. <meta name="select:--------------------">
  261.  
  262. <meta name="select:navlinks transparency" title="40%" content="0.4">
  263. <meta name="select:navlinks transparency" title="none" content="0">
  264. <meta name="select:navlinks transparency" title="10%" content="0.1">
  265. <meta name="select:navlinks transparency" title="20%" content="0.2">
  266. <meta name="select:navlinks transparency" title="30%" content="0.3">
  267. <meta name="select:navlinks transparency" title="50%" content="0.5">
  268. <meta name="select:navlinks transparency" title="60%" content="0.6">
  269. <meta name="select:navlinks transparency" title="70%" content="0.7">
  270. <meta name="select:navlinks transparency" title="80%" content="0.8">
  271. <meta name="select:navlinks transparency" title="90%" content="0.9">
  272.  
  273. <meta name="select:---------------------">
  274.  
  275. <meta name="select:desc padding" title="16px" content="16px">
  276. <meta name="select:desc padding" title="10px" content="10px">
  277. <meta name="select:desc padding" title="13px" content="13px">
  278. <meta name="select:desc padding" title="19px" content="19px">
  279. <meta name="select:desc padding" title="21px" content="21px">
  280.  
  281. <meta name="select:desc text align" title="justify" content="justify">
  282. <meta name="select:desc text align" title="left" content="left">
  283. <meta name="select:desc text align" title="center" content="center">
  284. <meta name="select:desc text align" title="right" content="right">
  285.  
  286. <meta name="select:desc transparency" title="30%" content="0.3">
  287. <meta name="select:desc transparency" title="none" content="0">
  288. <meta name="select:desc transparency" title="10%" content="0.1">
  289. <meta name="select:desc transparency" title="20%" content="0.2">
  290. <meta name="select:desc transparency" title="40%" content="0.4">
  291. <meta name="select:desc transparency" title="50%" content="0.5">
  292. <meta name="select:desc transparency" title="60%" content="0.6">
  293. <meta name="select:desc transparency" title="70%" content="0.7">
  294. <meta name="select:desc transparency" title="80%" content="0.8">
  295. <meta name="select:desc transparency" title="90%" content="0.9">
  296.  
  297. <meta name="select:desc box shadow" title="yes" content="yes">
  298. <meta name="select:desc box shadow" title="none" content="no">
  299.  
  300. <meta name="select:desc side gap" title="25%" content="0.125">
  301. <meta name="select:desc side gap" title="10%" content="0.05">
  302. <meta name="select:desc side gap" title="15%" content="0.075">
  303. <meta name="select:desc side gap" title="20%" content="0.1">
  304. <meta name="select:desc side gap" title="30%" content="0.15">
  305. <meta name="select:desc side gap" title="35%" content="0.175">
  306.  
  307. <meta name="select:desc bottom gap" title="35px" content="35px">
  308. <meta name="select:desc bottom gap" title="10px" content="10px">
  309. <meta name="select:desc bottom gap" title="15px" content="15px">
  310. <meta name="select:desc bottom gap" title="20px" content="20px">
  311. <meta name="select:desc bottom gap" title="25px" content="25px">
  312. <meta name="select:desc bottom gap" title="30px" content="30px">
  313. <meta name="select:desc bottom gap" title="40px" content="40px">
  314. <meta name="select:desc bottom gap" title="45px" content="45px">
  315. <meta name="select:desc bottom gap" title="50px" content="50px">
  316.  
  317. <!-------- CONTAINER GENERAL -------->
  318. <meta name="select:----------------------">
  319. <meta name="select:center gap" title="45px" content="45px">
  320. <meta name="select:center gap" title="25px" content="25px">
  321. <meta name="select:center gap" title="10px" content="10px">
  322. <meta name="select:center gap" title="15px" content="15px">
  323. <meta name="select:center gap" title="20px" content="20px">
  324. <meta name="select:center gap" title="30px" content="30px">
  325. <meta name="select:center gap" title="35px" content="35px">
  326. <meta name="select:center gap" title="40px" content="40px">
  327. <meta name="select:center gap" title="55px" content="55px">
  328. <meta name="select:center gap" title="50px" content="50px">
  329. <meta name="select:center gap" title="55px" content="55px">
  330. <meta name="select:center gap" title="60px" content="60px">
  331. <meta name="select:center gap" title="65px" content="65px">
  332. <meta name="select:center gap" title="70px" content="70px">
  333.  
  334. <meta name="select:-----------------------">
  335. <meta name="select:background image type" title="small" content="repeat">
  336. <meta name="select:background image type" title="large" content="full">
  337.  
  338. <!-------- POST OPTIONS -------->
  339. <meta name="select:font" title="Rubik" content="Rubik">
  340. <meta name="select:font" title="Libre Franklin" content="Libre Franklin">
  341. <meta name="select:font" title="Open Sans" content="Open Sans">
  342. <meta name="select:font" title="Manrope" content="Manrope">
  343. <meta name="select:font" title="Karla" content="Karla">
  344. <meta name="select:font" title="IBM Plex Sans" content="IBM Plex Sans">
  345.  
  346. <meta name="select:font size" title="13px" content="13px">
  347. <meta name="select:font size" title="10px" content="10px">
  348. <meta name="select:font size" title="11px" content="11px">
  349. <meta name="select:font size" title="12px" content="12px">
  350. <meta name="select:font size" title="14px" content="14px">
  351. <meta name="select:font size" title="15px" content="15px">
  352.  
  353. <meta name="select:post width" title="fill up remaining space" content="fill">
  354. <meta name="select:post width" title="420px" content="420px">
  355. <meta name="select:post width" title="460px" content="460px">
  356. <meta name="select:post width" title="500px" content="500px">
  357. <meta name="select:post width" title="540px" content="540px">
  358.  
  359. <meta name="select:post padding" title="18px" content="18px">
  360. <meta name="select:post padding" title="10px" content="10px">
  361. <meta name="select:post padding" title="12px" content="12px">
  362. <meta name="select:post padding" title="14px" content="14px">
  363. <meta name="select:post padding" title="16px" content="16px">
  364. <meta name="select:post padding" title="20px" content="20px">
  365. <meta name="select:post padding" title="22px" content="22px">
  366. <meta name="select:post padding" title="24px" content="24px">
  367. <meta name="select:post padding" title="26px" content="26px">
  368.  
  369. <meta name="select:photoset spacing" title="6px" content="6px">
  370. <meta name="select:photoset spacing" title="2px" content="2px">
  371. <meta name="select:photoset spacing" title="4px" content="4px">
  372. <meta name="select:photoset spacing" title="8px" content="8px">
  373. <meta name="select:photoset spacing" title="10px" content="10px">
  374.  
  375. <meta name="select:grayscale images" title="reblogger icon only" content="rb-ico">
  376. <meta name="select:grayscale images" title="everything in posts" content="everything">
  377. <meta name="select:grayscale images" title="off" content="off">
  378.  
  379. <meta name="select:click tags" title="yes" content="yes">
  380. <meta name="select:click tags" title="no" content="no">
  381.  
  382. <meta name="select:post spacing" title="35px" content="35px">
  383. <meta name="select:post spacing" title="30px" content="30px">
  384. <meta name="select:post spacing" title="25px" content="25px">
  385. <meta name="select:post spacing" title="40px" content="40px">
  386. <meta name="select:post spacing" title="45px" content="45px">
  387. <meta name="select:post spacing" title="50px" content="50px">
  388. <meta name="select:post spacing" title="55px" content="55px">
  389.  
  390. <!--------- TUMBLR CONTROLS OPTIONS --------->
  391. <meta name="select:------------------------">
  392. <meta name="select:tumblr controls color" title="white" content="white">
  393. <meta name="select:tumblr controls color" title="black" content="black">
  394.  
  395. <!--------- TEXT FIELDS --------->
  396. <meta name="text:music player song name" content="Dramatic Slow Motion (2020 ver.)">
  397. <meta name="text:music player song mp3" content="https://rhizo.gitlab.io/m/Dramatic_Slow_Motion__Reconstructed_2020_.mp3">
  398. <meta name="text:sidebar desc" content="I fell in love with the vivid oranges and rosy pink skies, the chilly winter breeze teasing my skin, the serenity of nothingness and everything-ness. I accepted and understood that death, indeed, has no rush. Sooner or later, we will all be deep underground; living is not guaranteed. I gasped for air as I had been deprived for eternity.&ensp;&mdash;&ensp;&lt;a href=&quot;https://journalsbyrm.tumblr.com/post/649416599737090048/the-humane-truth-of-living&quot;&gt;@journalsbyrm&lt;/a&gt;">
  399.  
  400. <meta name="text:customlink 1 name" content="sample link">
  401. <meta name="text:customlink 1 url" content="https://youtu.be/ZkNMZlkrzaU">
  402. <meta name="text:customlink 2 name" content="">
  403. <meta name="text:customlink 2 url" content="">
  404. <meta name="text:customlink 3 name" content="">
  405. <meta name="text:customlink 3 url" content="">
  406. <meta name="text:customlink 4 name" content="">
  407. <meta name="text:customlink 4 url" content="">
  408. <meta name="text:customlink 5 name" content="">
  409. <meta name="text:customlink 5 url" content="">
  410. <meta name="text:customlink 6 name" content="">
  411. <meta name="text:customlink 6 url" content="">
  412. <meta name="text:customlink 7 name" content="">
  413. <meta name="text:customlink 7 url" content="">
  414. <meta name="text:customlink 8 name" content="">
  415. <meta name="text:customlink 8 url" content="">
  416.  
  417. <!--------------------------------------------------->
  418.  
  419. <style type="text/css">
  420.  
  421. @font-face { font-family: "LT emphasis"; src: url("//glen-assets.github.io/fonts/LT Emphasis.ttf"); }
  422.  
  423. @font-face { font-family: "roxborough cf thin"; src: url('//glen-assets.github.io/fonts/Roxborough-CF-Thin.ttf'); }
  424.  
  425. /*-------- TUMBLR CONTROLS --------*/
  426. iframe#tumblr_controls, .iframe-controls--desktop {
  427. top:5px!important;
  428. right:calc(5px + var(--Scrollbar-Padding))!important;
  429. position:fixed!important;
  430.  
  431. transform:scale(0.7,0.7);
  432. -webkit-transform:scale(0.7,0.7);
  433.  
  434. transform-origin:100% 0;
  435. z-index:999999!important;
  436. user-select:none;
  437. }
  438.  
  439. [tumblr-controls="black"] iframe#tumblr_controls,
  440. [tumblr-controls="black"] .iframe-controls--desktop {
  441. filter:invert(100%) hue-rotate(180deg)!important;
  442. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  443. }
  444.  
  445.  
  446. /*------- SCROLLBAR --------*/
  447. ::-webkit-scrollbar {
  448. width:var(--Scrollbar-Padding);
  449. height:var(--Scrollbar-Padding);
  450. background-color:{color:scrollbar background};
  451. }
  452.  
  453. ::-webkit-scrollbar-thumb {
  454. background-color:{color:scrollbar};
  455. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  456. border-top:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
  457. border-bottom:calc(var(--Scrollbar-Padding) / 2.69) solid transparent;
  458. background-clip:padding-box;
  459. }
  460.  
  461. ::-webkit-scrollbar-corner {
  462. background:transparent;
  463. }
  464.  
  465. /*------- TOOLTIPS --------*/
  466. #s-m-t-tooltip {
  467. padding:5px 9px;
  468. margin:17px;
  469. background-color:rgba({RGBcolor:desc bg},calc(1 - {select:desc transparency}));
  470. border-radius:2px;
  471. border:1px solid {color:desc border};
  472. font-family:var(--SmallCaps-Font-Family);
  473. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  474. letter-spacing:1px;
  475. text-transform:uppercase;
  476. color:{color:desc text};
  477. line-height:var(--Line-Height);
  478. backdrop-filter:blur(2px);
  479. z-index:99;
  480. max-width:40vw;
  481. }
  482.  
  483. [sb-shad="yes"] #s-m-t-tooltip {
  484. box-shadow:0 4px 5px rgba({RGBcolor:navlinks shadow},42%);
  485. }
  486.  
  487. /*---- GLOBAL FONT SETTINGS -----*/
  488. [font]{
  489. font-family:var(--Body-Font-Family);
  490. font-size:var(--Body-Font-Size);
  491. color:var(--Body-Text-Color);
  492. }
  493.  
  494. [font="Libre Franklin"]{
  495. font-size:calc(var(--Body-Font-Size) - .5px)!important;
  496. letter-spacing:0.1px;
  497. }
  498.  
  499. [font="Manrope"]{
  500. font-size:calc(var(--Body-Font-Size) - 1px)!important;
  501. letter-spacing:0.3px;
  502. }
  503.  
  504. /*------- TEXT HIGHLIGHT --------*/
  505. ::selection {
  506. background:{color:text selection background};
  507. color:{color:text selected};
  508. }
  509.  
  510. ::-moz-selection {
  511. background:{color:text selection background};
  512. color:{color:text selected};
  513. }
  514.  
  515. /*------- BASICS --------*/
  516. body {
  517. margin:0;
  518. background-color:{color:background};
  519. background-image:url('{image:background image}');
  520. background-attachment:fixed;
  521. overflow:hidden;
  522. overscroll-behavior-y:none;
  523. }
  524.  
  525. [bg-type="repeat"] body {
  526. background-repeat:repeat;
  527. }
  528.  
  529. [bg-type="full"] body {
  530. background-repeat:no-repeat;
  531. background-size:cover;
  532. background-position:center;
  533. }
  534.  
  535. a {
  536. text-decoration:none;
  537. color:var(--Link);
  538. }
  539.  
  540. a[title][class*="smt-current-element"]:not([href]){
  541. cursor:help;
  542. }
  543.  
  544. a[title=""]:not([href]){
  545. cursor:initial;
  546. }
  547.  
  548. p {
  549. margin:var(--Paragraph-Margins) 0;
  550. }
  551.  
  552. blockquote {
  553. margin:var(--Paragraph-Margins);
  554. margin-right:0;
  555. padding-left:var(--Paragraph-Margins);
  556. border-left:1px solid rgba({RGBcolor:text},0.3);
  557. }
  558.  
  559. h1, h2, h3, h4, h5, h6, .linkpost-title {
  560. margin:var(--Heading-Margins) 0;
  561. font-family:var(--Heading-Font-Family);
  562. font-weight:bold;
  563. font-size:var(--Body-Font-Size);
  564. text-transform:uppercase;
  565. letter-spacing:1.7px;
  566. word-spacing:.7px;
  567. line-height:calc(var(--Line-Height) * 1.1);
  568. }
  569.  
  570. img, iframe {
  571. vertical-align:middle;
  572. max-width:100%;
  573. }
  574.  
  575. figure {
  576. margin:0;
  577. }
  578.  
  579. pre, code {
  580. white-space:pre-wrap;
  581. font-family:cousine;
  582. font-size:calc(var(--Body-Font-Size) - 2px);
  583. background:{color:special background};
  584. border:1px solid {color:special border};
  585. color:{color:special text};
  586. }
  587.  
  588. pre {
  589. padding:0.8em 1em;
  590. }
  591.  
  592. code {
  593. padding:3px 4px;
  594. }
  595.  
  596. hr {
  597. display:block;
  598. margin:var(--Heading-Margins) auto;
  599. border-width:0px;
  600. width:69%;
  601. height:1px;
  602. background:{color:post borders inner};
  603. }
  604.  
  605. p.p-read {
  606. position:relative;
  607. text-align:center;
  608. }
  609.  
  610. p.p-read:before {
  611. content:"";
  612. position:absolute;
  613. top:50%;
  614. transform:translateY(-50%);
  615. left:0;
  616. width:100%;
  617. height:1px;
  618. background:{color:post borders inner};
  619. z-index:1;
  620. }
  621.  
  622. a.read_more {
  623. position:relative;
  624. padding:var(--Captions-Gap) var(--Post-Padding);
  625. background:{color:post};
  626. font-family:var(--Heading-Font-Family);
  627. font-weight:bold;
  628. font-size:calc(var(--Heading-Font-Size) - .5px);
  629. text-transform:uppercase;
  630. letter-spacing:1.7px;
  631. word-spacing:.3px;
  632. text-align:center;
  633. color:{color:reblogger}!important;
  634. z-index:2;
  635. }
  636.  
  637. ul, ol {
  638. margin:var(--Paragraph-Margins) 0;
  639. margin-left:1.69em;
  640. padding:0;
  641. }
  642.  
  643. ol li {
  644. padding-left:0.420em;
  645. }
  646.  
  647. ul li {
  648. position:relative;
  649. padding-left:0.25em;
  650. margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
  651. list-style:none;
  652. }
  653.  
  654. ul li:before {
  655. content:"";
  656. position:absolute;
  657. margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
  658. transform:translateY(-50%);
  659. left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
  660. width:var(--Body-Font-Size);
  661. height:.7px;
  662. background:rgba({RGBcolor:text},0.5);
  663. }
  664.  
  665. .flex, [flex]{
  666. display:flex!important;
  667. align-items:center;
  668. }
  669.  
  670. .basicons [stroke-width]{
  671. stroke-width:2!important;
  672. }
  673.  
  674. :root {
  675. /*--- SIDEBAR SETTINGS ---*/
  676. --Sidebar-Width:{select:sidebar width};
  677.  
  678. --NavLinks-Per-Row:4;
  679. --NavLinks-Spacing:6px;
  680. --NavLinks-Padding:9px;
  681. --NavLinks-Hover-Speed:0.2s;
  682.  
  683. --Desc-Top-Gap:7px;
  684.  
  685. --CustomLinks-Circle-Size:19px;
  686. --CustomLinks-Circle-Hover-Speed:0.25s;
  687. --CustomLinks-Spacing:12px;
  688. --CustomLinks-Bar-Padding:14px;
  689.  
  690. --SBW-Total:calc(var(--Sidebar-Width) + var(--CustomLinks-Circle-Size) + (var(--CustomLinks-Bar-Padding) * 2));
  691.  
  692. /*--- POST SETTINGS ---*/
  693. /* currently not in use [below] */
  694. --ugh:calc({select:post width} + (var(--Post-Padding) * 2));
  695.  
  696. --RestOfWidth:calc(100% - var(--SBW-Total) - (var(--Center-Gap) * 2));
  697.  
  698. --Paragraph-Margins:1em;
  699. --Heading-Margins:1em;
  700.  
  701. --Body-Font-Family:{select:font};
  702. --Body-Font-Size:{select:font size};
  703. --Body-Text-Color:{color:text};
  704.  
  705. --Line-Height:1.7em; /* line-height with suffix */
  706. --Line-Height-INT:1.7; /* line-height without suffix */
  707.  
  708. --Heading-Font-Family:"roxborough cf thin";
  709. --Heading-Font-Size:calc(var(--Body-Font-Size) + .7px);
  710.  
  711. --SmallCaps-Font-Family:"LT emphasis";
  712. --SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 1.5px);
  713.  
  714. --Post-Width:{select:post width};
  715. --Post-Padding:{select:post padding};
  716. --Post-Spacing:{select:post spacing};
  717.  
  718. --Reblogger-Avatar-Size:22px;
  719. --Reblogger-Avatar-Gap-Right:8px;
  720. --Reblogger-Username-Color:{color:reblogger};
  721. --Reblogger-Avatar-Bottom-Gap:12px;
  722.  
  723. --Reblogs-Spacing:15px;
  724. --Reblogs-Border:{color:post borders inner};
  725.  
  726. --Captions-Gap:15px;
  727. --NPF-Caption-Spacing:var(--Captions-Gap);
  728.  
  729. --Photoset-Spacing:{select:photoset spacing};
  730. --NPF-Image-Spacing:var(--Photoset-Spacing);
  731.  
  732. --Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
  733. --Grayscale-Transition-Speed:0.269s;
  734.  
  735. --AskerPortrait-Size:42px;
  736. --AskerPortrait-Padding:6px;
  737.  
  738. --Audio-Post-Album-Size:64px;
  739. --Audio-Post-Album-Right-Gap:13px;
  740. --Audio-Post-Buttons-Size:11px;
  741. --Audio-Post-Buttons-Color:{color:permalink};
  742. --Audio-Post-Buttons-Padding:11px;
  743. --Audio-Post-Buttons-Background:{color:permalink background};
  744.  
  745. --Link:{color:link};
  746. --Post-Borders-Inner:{color:post borders inner};
  747.  
  748. --Quote-Font-Family:var(--Heading-Font-Family);
  749. --Quote-Font-Size:calc(var(--Body-Font-Size));
  750.  
  751. /*--- TAGS SETTINGS ---*/
  752. --Tags-Fade-Speed-MS:269; /* fade speed without suffix */
  753. --Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
  754. --Tags-Spacing:4px;
  755.  
  756. /*--- POST BUTTONS SETTINGS ---*/
  757. --Post-Buttons-Size:calc(var(--Body-Font-Size) - 1px);
  758. --Post-Buttons-Color:{color:post buttons};
  759. --Like-Button-Liked:{color:like button liked};
  760. --Post-Buttons-Spacing:7px;
  761.  
  762. /*--- POST NOTES SETTINGS ---*/
  763. --Notes-Indicator-Size:14px;
  764. --Notes-Indicator-Gap-Right:7px;
  765. --Notes-Row-Spacing:10px;
  766.  
  767. /*--- MISC ---*/
  768. --Center-Gap:{select:center gap};
  769.  
  770. --Pagination-Color:{color:text};
  771.  
  772. --TumblrControls-Color:{select:tumblr controls color};
  773.  
  774. --Scrollbar-Padding:13px;
  775.  
  776. /*---- MUSIC PLAYER ----*/
  777. --MusicPlayer-Edge-Offset:18px;
  778. --MusicPlayer-Icon-Size:calc(var(--SmallCaps-Font-Size) - 1px);
  779. --MusicPlayer-Icon-Color:{color:music player text};
  780. --MusicPlayer-Circle-Background:{color:music player bg};
  781. --MusicPlayer-Circle-Padding:10px;
  782.  
  783. --MusicPlayer-Bar-Length:18px;
  784. --MusicPlayer-Bar-Color:{color:music player bg};
  785.  
  786. --MusicPlayer-Buttons-Size:calc(var(--SmallCaps-Font-Size) - 2px);
  787. --MusicPlayer-Buttons-Color:{color:music player text};
  788.  
  789. --MusicPlayer-Text-Color:{color:music player text};
  790.  
  791. --MusicPlayer-Main-Background:{color:music player bg};
  792. --MusicPlayer-Main-Padding:10px;
  793. --MusicPlayer-Main-Roundness:3px;
  794. }
  795.  
  796. /*---- CONTAINER -----*/
  797. .tout {
  798. position:absolute;
  799. top:0;left:0;
  800. width:100%;
  801. height:100%;
  802. overflow-x:hidden;
  803. overflow-y:auto;
  804. scroll-behavior:smooth;
  805. overscroll-behavior-y:none;
  806. }
  807.  
  808. @-moz-document url-prefix(){
  809. * {
  810. scrollbar-width:thin; /* firefox only */
  811. }
  812. }
  813.  
  814. /*---- LEFT LONG SIDEBAR ----*/
  815. [customize-page='true']{
  816. --Sidebar-Width:45vw;
  817. /* next 2 lines are the same as in root */
  818. /* just needed to re-declare */
  819. --SBW-Total:calc(var(--Sidebar-Width) + var(--CustomLinks-Circle-Size) + (var(--CustomLinks-Bar-Padding) * 2));
  820. --RestOfWidth:calc(100% - var(--SBW-Total) - (var(--Center-Gap) * 2));
  821. }
  822.  
  823. .leftcont {
  824. position:fixed;
  825. top:0;left:0;
  826. width:var(--Sidebar-Width);
  827. height:100vh;
  828. background-image:url('{image:sidebar background}');
  829. background-size:cover;
  830. background-position:{select:sidebar background position};
  831. background-color:{color:sidebar background};
  832. z-index:13;
  833. }
  834.  
  835. .cheez-corn {
  836. position:absolute;
  837. margin:auto;
  838. margin-left:calc(var(--Sidebar-Width) * {select:desc side gap});
  839. bottom:0;margin-bottom:{select:desc bottom gap};
  840. width:calc(100% - ((var(--Sidebar-Width) * {select:desc side gap}) * 2));
  841. z-index:1;
  842. }
  843.  
  844. /*---- NAVLINKS -----*/
  845. .butain {
  846. display:flex;
  847. flex-wrap:wrap;
  848. margin-top:calc(0px - (var(--NavLinks-Spacing) / 2));
  849. margin-left:calc(0px - (var(--NavLinks-Spacing) / 2));
  850. margin-bottom:calc(0px - (var(--NavLinks-Spacing) / 2));
  851. width:calc(100% + var(--NavLinks-Spacing));
  852. }
  853.  
  854. .cheez-corn[shad='yes'] .butain a {
  855. box-shadow:0 4px 5px rgba({RGBcolor:navlinks shadow},42%);
  856. text-shadow:1px 1.3px 2.5px {color:navlinks bg};
  857. }
  858.  
  859. .butain a {
  860. display:flex;
  861. align-items:center;
  862. justify-content:center;
  863. margin:calc(var(--NavLinks-Spacing) / 2);
  864. width:calc((100% - (var(--NavLinks-Spacing) * var(--NavLinks-Per-Row))) / var(--NavLinks-Per-Row));
  865. padding:calc(var(--NavLinks-Padding) - 2px) var(--NavLinks-Padding);
  866. background:rgba({RGBcolor:navlinks bg},calc(1 - {select:navlinks transparency}));
  867. backdrop-filter:blur(3px);
  868. border:1px solid {color:navlinks border};
  869. border-radius:3px;
  870. box-sizing:border-box;
  871. max-width:100%;
  872. overflow:hidden;
  873. transition:background var(--NavLinks-Hover-Speed) ease-in-out;
  874. }
  875.  
  876. .butain a:hover {
  877. background:rgba({RGBcolor:navlinks bg},calc(1 - ({select:navlinks transparency} / 1.420)));
  878. }
  879.  
  880. .butain span {
  881. display:block;
  882. font-family:var(--SmallCaps-Font-Family);
  883. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  884. text-transform:uppercase;
  885. letter-spacing:1.5px;
  886. color:{color:navlinks text};
  887. }
  888.  
  889. /*---- SIDEBAR DESC -----*/
  890. .butain + .sb-desc {
  891. margin-top:var(--Desc-Top-Gap);
  892. }
  893.  
  894. .cheez-corn[shad='yes'] .sb-desc {
  895. box-shadow:0 5px 10px rgba({RGBcolor:desc box shadow},69%);
  896. text-shadow:1px 1.3px 2.5px {color:desc bg};
  897. }
  898.  
  899. .sb-desc {
  900. width:100%;
  901. padding:calc({select:desc padding} - 3px) {select:desc padding};
  902. background:rgba({RGBcolor:desc bg},calc(1 - {select:desc transparency}));
  903. backdrop-filter:blur(3px);
  904. border:1px solid {color:desc border};
  905. border-radius:6px;
  906. box-sizing:border-box;
  907. }
  908.  
  909. .desc-body {
  910. color:{color:desc text};
  911. font-size:calc(var(--Body-Font-Size) - 1px);
  912. line-height:170%;
  913. text-align:{select:desc text align};
  914. }
  915.  
  916. .desc-body a {
  917. padding-bottom:1px;
  918. border-bottom:1px solid rgba({RGBcolor:desc hyperlinks},0.25);
  919. font-family:var(--SmallCaps-Font-Size);
  920. font-size:calc(var(--SmallCaps-Font-Size) - 2px);
  921. text-transform:uppercase;
  922. letter-spacing:1px;
  923. color:{color:desc hyperlinks};
  924. }
  925.  
  926. /*---- CUSTOM LINKS BAR -----*/
  927. .leftdong {
  928. position:fixed;
  929. top:0;left:0;
  930. margin-left:var(--Sidebar-Width);
  931. width:calc(var(--CustomLinks-Circle-Size) + (var(--CustomLinks-Bar-Padding) * 2));
  932. height:100vh;
  933. background-color:{color:customlinks bar bg};
  934. display:table;
  935. z-index:13;
  936. }
  937.  
  938. .md {
  939. display:table-cell;
  940. vertical-align:middle;
  941. }
  942.  
  943. .customlinks a {
  944. display:block;
  945. margin:auto;
  946. font-size:0;
  947. line-height:0;
  948. width:var(--CustomLinks-Circle-Size);
  949. height:var(--CustomLinks-Circle-Size);
  950. border-radius:100%;
  951. transition:background var(--CustomLinks-Circle-Hover-Speed) ease-in-out;
  952. }
  953.  
  954. .customlinks a + a {
  955. margin-top:var(--CustomLinks-Spacing);
  956. }
  957.  
  958. .customlinks [cl-1]{
  959. background:{color:customlink 1 circle};
  960. }
  961.  
  962. .customlinks [cl-1]:hover {
  963. background:{color:customlink 1 hover};
  964. }
  965.  
  966. .customlinks [cl-2]{
  967. background:{color:customlink 2 circle};
  968. }
  969.  
  970. .customlinks [cl-2]:hover {
  971. background:{color:customlink 2 hover};
  972. }
  973.  
  974. .customlinks [cl-3]{
  975. background:{color:customlink 3 circle};
  976. }
  977.  
  978. .customlinks [cl-3]:hover {
  979. background:{color:customlink 3 hover};
  980. }
  981.  
  982. .customlinks [cl-4]{
  983. background:{color:customlink 4 circle};
  984. }
  985.  
  986. .customlinks [cl-4]:hover {
  987. background:{color:customlink 4 hover};
  988. }
  989.  
  990. .customlinks [cl-5]{
  991. background:{color:customlink 5 circle};
  992. }
  993.  
  994. .customlinks [cl-5]:hover {
  995. background:{color:customlink 5 hover};
  996. }
  997.  
  998. .customlinks [cl-6]{
  999. background:{color:customlink 6 circle};
  1000. }
  1001.  
  1002. .customlinks [cl-6]:hover {
  1003. background:{color:customlink 6 hover};
  1004. }
  1005.  
  1006. .customlinks [cl-7]{
  1007. background:{color:customlink 7 circle};
  1008. }
  1009.  
  1010. .customlinks [cl-7]:hover {
  1011. background:{color:customlink 7 hover};
  1012. }
  1013.  
  1014. .customlinks [cl-8]{
  1015. background:{color:customlink 8 circle};
  1016. }
  1017.  
  1018. .customlinks [cl-8]:hover {
  1019. background:{color:customlink 8 hover};
  1020. }
  1021.  
  1022. /*---- POST CONTAINER ----*/
  1023. .postscont {
  1024. position:absolute;
  1025. top:0;margin-top:var(--Center-Gap);
  1026. left:0;margin-left:calc(var(--SBW-Total) + var(--Center-Gap));
  1027. width:var(--RestOfWidth);
  1028. }
  1029.  
  1030. .postscont[postw='fill'] .posts {
  1031. width:100%;
  1032. box-sizing:border-box;
  1033. }
  1034.  
  1035. .posts {
  1036. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  1037. overflow:hidden;
  1038. }
  1039.  
  1040. .posts:first-child, .posts + * {
  1041. margin-bottom:var(--Post-Spacing);
  1042. }
  1043.  
  1044. [black-and-white="rb-ico"] .reblog-head img {
  1045. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1046. filter:var(--Grayscale-Settings);
  1047. }
  1048.  
  1049. [black-and-white="everything"] img,
  1050. [black-and-white="everything"] iframe,
  1051. [black-and-white="everything"] video {
  1052. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1053. filter:var(--Grayscale-Settings);
  1054. }
  1055.  
  1056. [black-and-white="everything"] .posts:hover img,
  1057. [black-and-white="everything"] .posts:hover iframe,
  1058. [black-and-white="everything"] .posts:hover video {
  1059. filter:none;
  1060. }
  1061.  
  1062. /*-----------------------*/
  1063.  
  1064. .postinner {
  1065. padding:var(--Post-Padding);
  1066. background:{color:post};
  1067. border:1px solid {color:post borders outer};
  1068. font-size:calc(var(--Body-Font-Size) - .5px);
  1069. line-height:var(--Line-Height);
  1070. }
  1071.  
  1072. .postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .inari, .tagsdiv a, .read_more){
  1073. padding-bottom:.5px;
  1074. border-bottom:1px solid rgba({RGBcolor:link},0.420);
  1075. }
  1076.  
  1077. /*---- REBLOG HEAD ----*/
  1078. .reblog-wrap {
  1079. margin:0 calc(0px - var(--Post-Padding));
  1080. padding:0 var(--Post-Padding);
  1081. }
  1082.  
  1083. .reblog-wrap + .reblog-wrap {
  1084. margin-top:var(--Reblogs-Spacing);
  1085. padding-top:var(--Reblogs-Spacing);
  1086. border-top:1px solid var(--Reblogs-Border);
  1087. }
  1088.  
  1089. .reblog-head {
  1090. display:flex;
  1091. align-items:center;
  1092. }
  1093.  
  1094. .reblog-head img {
  1095. width:var(--Reblogger-Avatar-Size);
  1096. height:var(--Reblogger-Avatar-Size);
  1097. border-radius:100%;
  1098. }
  1099.  
  1100. .reblog-head img + .reblog-url {
  1101. margin-left:var(--Reblogger-Avatar-Gap-Right);
  1102. }
  1103.  
  1104. .reblog-url, .reblog-url a, p > a.tumblr_blog[target='_blank']{
  1105. font-family:var(--SmallCaps-Font-Family);
  1106. font-size:calc(var(--SmallCaps-Font-Size) + .5px);
  1107. text-transform:uppercase;
  1108. letter-spacing:1px;
  1109. color:var(--Reblogger-Username-Color);
  1110. }
  1111.  
  1112. .reblog-url .deac {
  1113. margin-left:3px;
  1114. color:var(--Body-Text-Color);
  1115. }
  1116.  
  1117. .reblog-head + .reblog-comment {
  1118. margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
  1119. }
  1120.  
  1121. /*---- NPF... STUFF ----*/
  1122. figure[data-orig-src] + figure[data-orig-src]{
  1123. margin-top:var(--Photoset-Spacing);
  1124. }
  1125.  
  1126. .tmblr-full video {
  1127. cursor:pointer;
  1128. }
  1129.  
  1130. video::-webkit-media-controls-panel {
  1131. position:absolute;
  1132. bottom:0;
  1133. background:transparent!important;
  1134. width:100%;
  1135. box-sizing:border-box;
  1136. opacity:1!important;
  1137. }
  1138.  
  1139. video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
  1140. display:none!important;
  1141. }
  1142.  
  1143. * + .npf-link-block {
  1144. margin-top:10px;
  1145. }
  1146.  
  1147. .npf-link-block {
  1148. margin-top:0px;
  1149. margin-bottom:0;
  1150. border-color:{color:special border}!important;
  1151. border-radius:0!important;
  1152. }
  1153.  
  1154. .npf-link-block + * {
  1155. margin-bottom:var(--Paragraph-Margins);
  1156. }
  1157.  
  1158. .npf-link-block a {
  1159. padding:0!important;
  1160. border:none!important;
  1161. }
  1162.  
  1163. .npf-link-block .title {
  1164. font-family:var(--SmallCaps-Font-Family)!important;
  1165. font-size:calc(var(--SmallCaps-Font-Size) + 4px)!important;
  1166. text-transform:uppercase;
  1167. letter-spacing:1px;
  1168. color:{color:link}!important;
  1169. line-height:1.7em!important;
  1170. text-shadow:1px 1px 1px rgba(0,0,0,0.1);
  1171. }
  1172.  
  1173. .npf-link-block.no-poster .title {
  1174. position:relative;
  1175. background:{color:special background}!important;
  1176. letter-spacing:.7px!important;
  1177. }
  1178.  
  1179. .npf-link-block.no-poster .title:after {
  1180. content:"\e921";
  1181. position:absolute;
  1182. top:50%;transform:translateY(-50%);
  1183. right:0;margin-right:0.8em;
  1184. font-family:'cappuccicons'!important;
  1185. speak:never;
  1186. font-style:normal;
  1187. font-weight:normal;
  1188. font-variant:normal;
  1189. text-transform:none;
  1190. line-height:1;
  1191. -webkit-font-smoothing:antialiased;
  1192. -moz-osx-font-smoothing:grayscale;
  1193. }
  1194.  
  1195. .npf-link-block .poster {
  1196. border-bottom:1px solid {color:special border};
  1197. }
  1198.  
  1199. .npf-link-block .bottom {
  1200. background:transparent!important;
  1201. }
  1202.  
  1203. .npf-link-block .description {
  1204. font-family:var(--SmallCaps-Font-Family)!important;
  1205. font-weight:bold;
  1206. font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
  1207. text-transform:uppercase;
  1208. letter-spacing:1.3px;
  1209. word-spacing:.3px;
  1210. color:{color:link}!important;
  1211. line-height:1.7em!important;
  1212. }
  1213.  
  1214. .npf-link-block .site-name {
  1215. text-transform:initial!important;
  1216. font-family:var(--Body-Font-Family)!important;
  1217. font-weight:normal!important;
  1218. font-size:calc(var(--Body-Font-Size) - 1px)!important;
  1219. color:{color:special text}!important;
  1220. }
  1221.  
  1222. .npf-link-block .description + .site-name {
  1223. margin-top:0;
  1224. }
  1225.  
  1226. .npf-link-block.no-poster .title {
  1227. padding:0.8em!important;
  1228. text-shadow:none!important;
  1229. }
  1230.  
  1231. .npf-link-block.no-poster .title + .bottom {
  1232. border-top:1px solid {color:special border};
  1233. }
  1234.  
  1235. /*---- TEXT POSTS (TITLE) ----*/
  1236. .post-title, .linkpost-title {
  1237. margin-top:2px;
  1238. margin-bottom:0;
  1239. padding:0.8em;
  1240. background:{color:special background};
  1241. border:1px solid {color:special border};
  1242. font-size:var(--Heading-Font-Size);
  1243. font-weight:bold;
  1244. color:{color:special text};
  1245. text-align:center;
  1246. }
  1247.  
  1248. .post-title + *, .linkpost-title + * {
  1249. margin-top:var(--Heading-Margins);
  1250. }
  1251.  
  1252. /*---- LINK POSTS (TITLE) ----*/
  1253. .linkpost-title {
  1254. display:flex;
  1255. align-items:center;
  1256. justify-content:space-between;
  1257. color:{color:special text};
  1258. text-align:left;
  1259. }
  1260.  
  1261. .linkpost-title span {
  1262. display:block;
  1263. max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
  1264. }
  1265.  
  1266. span + .linksym {
  1267. margin-left:10px;
  1268. margin-right:2px;
  1269. }
  1270.  
  1271. .linksym {
  1272. width:calc(var(--Heading-Font-Size) * 1.1);
  1273. height:calc(var(--Heading-Font-Size) * 1.1);
  1274. -webkit-mask-size:contain;
  1275. -webkit-mask-repeat:no-repeat;
  1276. -webkit-mask-position:center;
  1277. -webkit-mask-image:var(--ext);
  1278. background:{color:special text};
  1279. }
  1280.  
  1281. .linkpost-title + .link-excerpt {
  1282. margin-top:-1px;
  1283. }
  1284.  
  1285. .link-excerpt {
  1286. padding:0.8em calc(0.8em + 2px);
  1287. border:1px solid {color:post borders inner};
  1288. }
  1289.  
  1290. .link-excerpt + * {
  1291. margin-top:var(--Heading-Margins);
  1292. }
  1293.  
  1294. .le-host {
  1295. font-family:var(--SmallCaps-Font-Family);
  1296. font-size:var(--SmallCaps-Font-Size);
  1297. text-transform:uppercase;
  1298. letter-spacing:.7px;
  1299. }
  1300.  
  1301. /*---- PHOTO POSTS ----*/
  1302. .single-photo {
  1303. cursor:pointer;
  1304. }
  1305.  
  1306. .photopic {
  1307. width:100%;
  1308. }
  1309.  
  1310. [photoset-layout] {
  1311. grid-gap:var(--Photoset-Spacing);
  1312. }
  1313.  
  1314. [photoset-layout] div {
  1315. cursor:pointer;
  1316. backface-visibility:hidden;
  1317. }
  1318.  
  1319. .caption {
  1320. margin-top:var(--Captions-Gap);
  1321. }
  1322.  
  1323. /*----- LIGHTBOX BS -----*/
  1324. .tmblr-lightbox, #tumblr_lightbox {
  1325. background-color:rgba({RGBcolor:post},0.69)!important;
  1326. }
  1327.  
  1328. .tmblr-lightbox .vignette {
  1329. background-image:none!important;
  1330. }
  1331.  
  1332. #vignette {display:none!important}
  1333.  
  1334. .lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
  1335. margin-top:calc(0px - var(--Post-Padding));
  1336. }
  1337.  
  1338. .tmblr-lightbox img, #tumblr_lightbox img {
  1339. max-width:initial;
  1340. box-shadow:none!important;
  1341. border-radius:0px!important;
  1342. padding:var(--Post-Padding);
  1343. background:{color:post}!important;
  1344. }
  1345.  
  1346. /*----- QUOTE POSTS -----*/
  1347. .postinner > .quote-words:first-child { margin-top:0 }
  1348.  
  1349. .quote-words, .npf_quote {
  1350. padding:0 var(--Post-Padding);
  1351. font-family:var(--Quote-Font-Family)!important;
  1352. font-weight:bold;
  1353. font-size:var(--Quote-Font-Size)!important;
  1354. text-transform:uppercase;
  1355. letter-spacing:1.3px;
  1356. text-align:center;
  1357. line-height:169%;
  1358. }
  1359.  
  1360. .quote-words + .quote-source,
  1361. .npf_quote + p[style*="margin-bottom: 0px;"]{
  1362. margin-top:var(--Paragraph-Margins);
  1363. text-align:center;
  1364. }
  1365.  
  1366. /*----- VIDEO POSTS -----*/
  1367. .tmblr-video {
  1368. max-width:initial;
  1369. }
  1370.  
  1371. .tumblr_video_container, .tumblr_video_iframe {
  1372. width:100%!important;
  1373. }
  1374.  
  1375. /*---- CHAT POSTS ----*/
  1376. .chatwrap {
  1377. display:table;
  1378. width:100%;
  1379. border:1px solid var(--Post-Borders-Inner);
  1380. box-sizing:border-box;
  1381. overflow:hidden;
  1382. }
  1383.  
  1384. .chat_row {
  1385. position:relative;
  1386. display:table-row;
  1387. overflow:hidden;
  1388. }
  1389.  
  1390. .chat_row:not(:has(.chat_label)){
  1391. display:block;
  1392. width:calc(var(--post-width-ro,100%) - 2px);
  1393. margin-right:calc(0px - var(--post-width-ro,100%) - 2px);
  1394. }
  1395.  
  1396. .chat_row:after {
  1397. content:"";
  1398. position:absolute;
  1399. bottom:0;left:0;
  1400. transform:translateY(-.5px);
  1401. width:100%;
  1402. height:1px;
  1403. background:var(--Post-Borders-Inner);
  1404. }
  1405.  
  1406. .chatwrap .chat_row:last-child:after {
  1407. display:none;
  1408. }
  1409.  
  1410. .chat_row code:only-child {
  1411. display:block;
  1412. padding:0.8em;
  1413. border:none;
  1414. background:transparent;
  1415. }
  1416.  
  1417. .chat_label {
  1418. display:table-cell;
  1419. white-space:nowrap;
  1420. padding-right:1em;
  1421. font-family:var(--SmallCaps-Font-Family);
  1422. font-size:var(--SmallCaps-Font-Size);
  1423. text-transform:uppercase;
  1424. letter-spacing:1px;
  1425. }
  1426.  
  1427. .chat_label, .chat_content {
  1428. padding:calc(1em - 2px) 1em;
  1429. }
  1430.  
  1431. .chat_content {
  1432. display:table-cell;
  1433. width:100%;
  1434. }
  1435.  
  1436. .chat_label + .chat_content {
  1437. border-left:1px solid var(--Post-Borders-Inner);
  1438. }
  1439.  
  1440. .chat_row .chat_label + .chat_content {
  1441. min-width:calc((var(--post-width-ro,100%) - 3px) / 2);
  1442. box-sizing:border-box;
  1443. }
  1444.  
  1445. /*---- AUDIO POSTS ----*/
  1446. .audio-post .npf_inst img {
  1447. width:100%;
  1448. }
  1449.  
  1450. .aud-emb {display:none}
  1451.  
  1452. .audiowrap {
  1453. display:flex;
  1454. align-items:center;
  1455. }
  1456.  
  1457. .albumwrap {
  1458. position:relative;
  1459. width:var(--Audio-Post-Album-Size);
  1460. height:var(--Audio-Post-Album-Size);
  1461. display:flex;
  1462. align-items:center;
  1463. justify-content:center;
  1464. }
  1465.  
  1466. .albumwrap[has-cover] .audplac {display:none}
  1467.  
  1468. .butts {
  1469. width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1470. height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  1471. background:var(--Audio-Post-Buttons-Background);
  1472. border-radius:100%;
  1473. display:flex;
  1474. align-items:center;
  1475. justify-content:center;
  1476. cursor:pointer;
  1477. z-index:2;
  1478. }
  1479.  
  1480. .overplay, .overpause {
  1481. width:var(--Audio-Post-Buttons-Size);
  1482. height:var(--Audio-Post-Buttons-Size);
  1483. -webkit-mask-size:contain;
  1484. -webkit-mask-repeat:no-repeat;
  1485. -webkit-mask-position:center;
  1486. background:var(--Audio-Post-Buttons-Color);
  1487. }
  1488.  
  1489. .overplay {
  1490. margin-left:2px;
  1491. -webkit-mask-image:var(--audioplay);
  1492. }
  1493.  
  1494. .overpause {
  1495. display:none;
  1496. -webkit-mask-image:var(--audiopause);
  1497. }
  1498.  
  1499. .ov-y {display:block}
  1500. .ov-z {display:none}
  1501.  
  1502. .audplac {
  1503. position:absolute;
  1504. top:0;left:0;
  1505. width:var(--Audio-Post-Album-Size);
  1506. height:var(--Audio-Post-Album-Size);
  1507. background:var(--Audio-Post-Buttons-Background);
  1508. }
  1509.  
  1510. .albumwrap img {
  1511. position:absolute;
  1512. top:0;left:0;
  1513. width:100%;
  1514. height:100%;
  1515. }
  1516.  
  1517. .audiotxt {
  1518. flex:1;
  1519. height:var(--Audio-Post-Album-Size);
  1520. padding:var(--Audio-Post-Album-Right-Gap);
  1521. background:{color:special background};
  1522. display:flex;
  1523. align-items:center;
  1524. box-sizing:border-box;
  1525. display:flex;
  1526. align-items:center;
  1527. justify-content:space-between;
  1528. font-size:calc(var(--Body-Font-Size) - 1.5px);
  1529. color:{color:special text};
  1530. }
  1531.  
  1532. .odin > div + div, .npf-audio-details > * + * {
  1533. margin-top:-4px;
  1534. }
  1535.  
  1536. .aud-song-name, .npf-audio-title {
  1537. font-family:var(--SmallCaps-Font-Family);
  1538. font-size:calc(var(--SmallCaps-Font-Size) + .5px);
  1539. text-transform:uppercase;
  1540. font-weight:bold;
  1541. letter-spacing:1px;
  1542. }
  1543.  
  1544. .aud-song-name[has-name] .untit {
  1545. display:none;
  1546. }
  1547.  
  1548. .aud-artist[has-artist] .unart {
  1549. display:none;
  1550. }
  1551.  
  1552. .inari {
  1553. display:block;
  1554. padding:6px;
  1555. margin-right:-6px;
  1556. cursor:pointer;
  1557. }
  1558.  
  1559. .int-all {
  1560. display:block;
  1561. width:calc(var(--Audio-Post-Buttons-Size) + 6px);
  1562. height:calc(var(--Audio-Post-Buttons-Size) + 6px);
  1563. -webkit-mask-size:contain;
  1564. -webkit-mask-repeat:no-repeat;
  1565. -webkit-mask-position:center;
  1566. -webkit-mask-image:var(--install);
  1567. background:{color:special text};
  1568. }
  1569.  
  1570. /*---- SPOTIFY ----*/
  1571. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  1572. height:80px!important;
  1573. }
  1574.  
  1575. .spotify_audio_player {
  1576. width:100%;
  1577. }
  1578.  
  1579. /*---- SOUNDCLOUD ----*/
  1580. .tmblr-video iframe[src*='soundcloud.com']{
  1581. }
  1582.  
  1583. .audio-soundcloud {
  1584. max-height:113px;
  1585. border-radius:4px;
  1586. overflow:hidden;
  1587. }
  1588.  
  1589. .soundcloud_audio_player {
  1590. margin:-1px;
  1591. margin-bottom:0;
  1592. width:calc(100% + 2px);
  1593. max-width:initial;
  1594. }
  1595.  
  1596. /*---- ASK/ANSWER POSTS ----*/
  1597. .une_question {
  1598. display:flex;
  1599. }
  1600.  
  1601. .asker-person {
  1602. align-self:baseline;
  1603. }
  1604.  
  1605. .une_question .reblog-comment {
  1606. flex:1;
  1607. margin-left:12px;
  1608. }
  1609.  
  1610. .askpot {
  1611. padding:var(--AskerPortrait-Padding);
  1612. background:{color:special background};
  1613. border:1px solid {color:special border};
  1614. }
  1615.  
  1616. .asker-person img {
  1617. width:var(--AskerPortrait-Size);
  1618. height:var(--AskerPortrait-Size);
  1619. border-radius:0;
  1620. }
  1621.  
  1622. .une_question .reblog-url {
  1623. margin-top:1px;
  1624. padding:3px 4px;
  1625. background:{color:special background};
  1626. border:1px solid {color:special border};
  1627. border-radius:2px;
  1628. color:{color:special text};
  1629. }
  1630.  
  1631. .question_text > p:first-child {
  1632. margin-top:4px;
  1633. }
  1634.  
  1635. .question_text > p:only-child {
  1636. margin-bottom:0;
  1637. }
  1638.  
  1639. .answerer + * {
  1640. margin-top:var(--Captions-Gap);
  1641. }
  1642.  
  1643. .une_question + .une_reponse {
  1644. margin-top:var(--Paragraph-Margins);
  1645. }
  1646.  
  1647. /*---- TAGS SECTION ----*/
  1648. .tagsdiv {
  1649. margin-top:var(--Captions-Gap);
  1650. }
  1651.  
  1652. .tagsdiv[clicktags="yes"]{
  1653. {block:IndexPage}
  1654. display:none;
  1655. opacity:0;
  1656. transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
  1657. {/block:IndexPage}
  1658. }
  1659.  
  1660. .tagsfade {
  1661. opacity:1!important;
  1662. }
  1663.  
  1664. .tagsin {
  1665. display:flex;
  1666. flex-wrap:wrap;
  1667. justify-content:flex-end;
  1668. margin:calc(0px - var(--Tags-Spacing));
  1669. /*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
  1670. margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
  1671. text-align:right;
  1672. }
  1673.  
  1674. .tagsin a {
  1675. position:relative;
  1676. display:block;
  1677. margin:0 var(--Tags-Spacing);
  1678. font-family:var(--SmallCaps-Font-Family);
  1679. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  1680. text-transform:uppercase;
  1681. letter-spacing:1px;
  1682. color:{color:tags};
  1683. }
  1684.  
  1685. .tagsin a:before {
  1686. content:"#";
  1687. font-family:work sans;
  1688. margin-right:.5px;
  1689. }
  1690.  
  1691. /*---- PERMALINK BAR ----*/
  1692. .permadiv {
  1693. margin-top:10px;
  1694. display:flex;
  1695. align-items:center;
  1696. justify-content:space-between;
  1697. padding:calc(var(--Post-Padding) - 2px);
  1698. background:{color:permalink background};
  1699. border:1px solid {color:permalink border};
  1700. font-family:var(--SmallCaps-Font-Family);
  1701. font-size:calc(var(--SmallCaps-Font-Size) - .3px);
  1702. text-transform:uppercase;
  1703. letter-spacing:1px;
  1704. word-spacing:.3px;
  1705. }
  1706.  
  1707. .permadiv, .permadiv a {
  1708. color:{color:permalink};
  1709. }
  1710.  
  1711. .permaleft {
  1712. }
  1713.  
  1714. .permaleft a {
  1715. display:flex;
  1716. align-items:center;
  1717. margin:calc(0px - var(--Post-Padding));
  1718. margin-right:0;
  1719. padding:var(--Post-Padding);
  1720. padding-right:2px;
  1721. }
  1722.  
  1723. .permaleft .basicons {
  1724. display:block;
  1725. backface-visibility:hidden;
  1726. --Basicons-Icon-Size:calc(var(--Body-Font-Size) + 1.5px);
  1727. --Basicons-Icon-Color:{color:permalink};
  1728. margin-right:calc(8px + (var(--Basicons-Icon-Size) * 0.1));
  1729. }
  1730.  
  1731. .permaleft .basicons [stroke-width]{
  1732. stroke-width:1.5!important;
  1733. }
  1734.  
  1735. .permaleft .basicons svg {
  1736. display:block;
  1737. transform-origin:left;
  1738. transform:scaleX(1.1);
  1739. }
  1740.  
  1741. .permaright {
  1742. display:flex;
  1743. align-items:center;
  1744. justify-content:center;
  1745. letter-spacing:1px;
  1746. }
  1747.  
  1748. .permaright a {
  1749. display:block;
  1750. position:relative;
  1751. {block:IndexPage}
  1752. width:var(--Post-Buttons-Size);
  1753. height:var(--Post-Buttons-Size);
  1754. {/block:IndexPage}
  1755. }
  1756.  
  1757. .permaright span {display:block}
  1758.  
  1759. .permaright a + a {
  1760. margin-left:var(--Post-Buttons-Spacing);
  1761. }
  1762.  
  1763. .permaright[clicktags="no"] .clicktags {
  1764. display:none;
  1765. }
  1766.  
  1767. .clicktags {
  1768. cursor:help;
  1769. display:block;
  1770. margin-top:1.5px;
  1771. }
  1772.  
  1773. .clicktags .cp {
  1774. display:block;
  1775. transform:scaleX(-1);
  1776. }
  1777.  
  1778. .permaright .cp, .permaright [class*='ph-']{
  1779. font-size:var(--Post-Buttons-Size);
  1780. color:var(--Post-Buttons-Color);
  1781. line-height:var(--Post-Buttons-Size);
  1782. }
  1783.  
  1784. .permaright [class*='ph-']{
  1785. display:block;
  1786. margin-top:-1px;
  1787. margin-left:-1px;
  1788. margin-right:.5px;
  1789. font-size:calc(var(--Post-Buttons-Size) + 2px);
  1790. }
  1791.  
  1792. .like_button {
  1793. position:absolute;
  1794. top:0;left:0;
  1795. width:100%;
  1796. height:100%;
  1797. z-index:2;
  1798. }
  1799.  
  1800. .like_button iframe {
  1801. width:100%;
  1802. height:100%;
  1803. vertical-align:initial;
  1804. opacity:0;
  1805. }
  1806.  
  1807. .like_button.liked + .cp {
  1808. color:var(--Like-Button-Liked);
  1809. }
  1810.  
  1811. .permaright a[dash]{
  1812. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  1813. }
  1814.  
  1815. /*---- POST NOTES ----*/
  1816. .notescont {
  1817. margin-top:var(--Post-Spacing);
  1818. padding:var(--Post-Padding);
  1819. background:{color:post};
  1820. border:1px solid {color:post borders outer};
  1821. }
  1822.  
  1823. .notescont h1 {
  1824. margin-top:5px;
  1825. margin-bottom:calc(var(--Heading-Margins) + 4px);
  1826. letter-spacing:1.3px;
  1827. text-align:center;
  1828. }
  1829.  
  1830. .notescont ol.notes {
  1831. padding:0;
  1832. margin:0;
  1833. }
  1834.  
  1835. .notescont li {
  1836. list-style-type:none;
  1837. padding:0!important;
  1838. }
  1839.  
  1840. .notescont li + li {
  1841. margin-top:var(--Notes-Row-Spacing);
  1842. }
  1843.  
  1844. .notescont li:before {
  1845. font-family:phosphor;
  1846. font-size:var(--Notes-Indicator-Size);
  1847. color:{color:text};
  1848. vertical-align:middle;
  1849. }
  1850.  
  1851. .notescont li.like:before {
  1852. content:"\f1ca";
  1853. }
  1854.  
  1855. .notescont li.reblog:before {
  1856. content:"\f2c3";
  1857. }
  1858.  
  1859. .notescont li.reply:before,
  1860. .notescont li.with_commentary:before {
  1861. content:"\f0db"!important;
  1862. }
  1863.  
  1864. .notescont .avatar_frame {
  1865. display:none;
  1866. }
  1867.  
  1868. .notescont .avatar_frame + .action {
  1869. margin-left:var(--Notes-Indicator-Gap-Right);
  1870. }
  1871.  
  1872. .notescont .action a {
  1873. font-family:var(--SmallCaps-Font-Family);
  1874. font-size:calc(var(--SmallCaps-Font-Size) - .3px);
  1875. text-transform:uppercase;
  1876. letter-spacing:1.3px;
  1877. color:{color:reblogger};
  1878. }
  1879.  
  1880. .notescont blockquote {
  1881. margin-left:calc(var(--Notes-Indicator-Size) / 2);
  1882. padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
  1883. }
  1884.  
  1885. .more_notes_link_container {
  1886. margin-top:1em!important;
  1887. margin-bottom:calc(var(--Paragraph-Margins) / 2);
  1888. }
  1889.  
  1890. .more_notes_link {
  1891. font-family:var(--SmallCaps-Font-Family);
  1892. font-size:calc(var(--SmallCaps-Font-Size) + 1.3px);
  1893. text-transform:uppercase;
  1894. letter-spacing:1px;
  1895. }
  1896.  
  1897. /*---- PAGINATION ----*/
  1898. .botpagi {
  1899. display:flex;
  1900. align-items:center;
  1901. justify-content:space-between;
  1902. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  1903. margin-top:var(--Post-Spacing);
  1904. margin-bottom:var(--Post-Spacing);
  1905. font-family:var(--SmallCaps-Font-Family);
  1906. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  1907. text-transform:uppercase;
  1908. letter-spacing:1px;
  1909. line-height:1em;
  1910. }
  1911.  
  1912. .botpagi a {
  1913. padding:0.69em;
  1914. margin:-0.69em;
  1915. color:var(--Pagination-Color)!important;
  1916. }
  1917.  
  1918. .botpagi span {
  1919. padding:0 4px;
  1920. }
  1921.  
  1922. .prev-svg {
  1923. margin-top:-.5px;
  1924. width:calc(var(--Body-Font-Size) + 3px);
  1925. height:calc(var(--Body-Font-Size) + 3px);
  1926. -webkit-mask-image:var(--BackSVG);
  1927. -webkit-mask-repeat:no-repeat;
  1928. -webkit-mask-size:contain;
  1929. background:var(--Pagination-Color)
  1930. }
  1931.  
  1932. .next-svg {
  1933. margin-top:-.5px;
  1934. width:calc(var(--Body-Font-Size) + 3px);
  1935. height:calc(var(--Body-Font-Size) + 3px);
  1936. -webkit-mask-image:var(--NextSVG);
  1937. -webkit-mask-repeat:no-repeat;
  1938. -webkit-mask-size:contain;
  1939. background:var(--Pagination-Color)
  1940. }
  1941.  
  1942. .pn {
  1943. margin-left:auto!important;
  1944. }
  1945.  
  1946. /*---- OTHER ----*/
  1947. .ghostest {display:none}
  1948.  
  1949. .msgbby {
  1950. position:fixed;
  1951. bottom:0;left:0;
  1952. width:100%;
  1953. padding:12px;
  1954. background:#e0ddd6;
  1955. font-family:var(--SmallCaps-Font-Family);
  1956. font-size:var(--SmallCaps-Font-Size);
  1957. text-transform:uppercase;
  1958. letter-spacing:.7px;
  1959. color:#4b4239;
  1960. box-sizing:border-box;
  1961. text-align:center;
  1962. z-index:69;
  1963. }
  1964.  
  1965. .msgbby span {
  1966. font-weight:bold;
  1967. color:#a97a60;
  1968. }
  1969.  
  1970. /*---- CORNER MUSIC PLAYER ----*/
  1971. .mplayer {
  1972. position:fixed;
  1973. top:0;margin-top:var(--MusicPlayer-Edge-Offset);
  1974. left:0;margin-left:var(--MusicPlayer-Edge-Offset);
  1975. display:flex;
  1976. align-items:center;
  1977. z-index:70;
  1978. }
  1979.  
  1980. [sb-shad="yes"] .mplayer {
  1981. filter:drop-shadow(2px 2px 1px rgba(0,0,0,4%))
  1982. }
  1983.  
  1984. .zirc {
  1985. position:relative;
  1986. margin-right:-1px;
  1987. padding:var(--MusicPlayer-Circle-Padding);
  1988. background:var(--MusicPlayer-Circle-Background);
  1989. border-radius:100%;
  1990. overflow:hidden;
  1991. line-height:0;
  1992. z-index:2;
  1993. }
  1994.  
  1995. /* hover stuff */
  1996. .potatowrap {
  1997. opacity:0;
  1998. transition:opacity .420s ease-in-out;
  1999. transition-delay:0s;
  2000. }
  2001.  
  2002. .mplayer:hover .mline {
  2003. width:var(--MusicPlayer-Bar-Length);
  2004. transition-delay:0s; /* delay when mouseleave */
  2005. }
  2006.  
  2007. .mplayer:hover .potatowrap {
  2008. opacity:1;
  2009. transition-delay:.420s;
  2010. }
  2011.  
  2012. .blay, .bause {
  2013. -webkit-mask-size:contain;
  2014. -webkit-mask-position:center;
  2015. -webkit-mask-repeat:no-repeat;
  2016. }
  2017.  
  2018. .zirc .basicons {
  2019. --Basicons-Icon-Size:var(--MusicPlayer-Icon-Size);
  2020. --Basicons-Icon-Color:var(--MusicPlayer-Icon-Color);
  2021. }
  2022.  
  2023. .mline {
  2024. margin-right:-3px;
  2025. width:0px;
  2026. height:3px;
  2027. background:var(--MusicPlayer-Bar-Color);
  2028. border-radius:6px;
  2029. transition:width .420s ease-in-out;
  2030. transition-delay:.420s; /* delay when mouseenter */
  2031. }
  2032.  
  2033. .potatowrap {
  2034. display:flex;
  2035. align-items:center;
  2036. padding:calc(var(--MusicPlayer-Main-Padding) - 2px) var(--MusicPlayer-Main-Padding);
  2037. background:var(--MusicPlayer-Main-Background);
  2038. border-radius:var(--MusicPlayer-Main-Roundness);
  2039. }
  2040.  
  2041. .music-controls {
  2042. margin:-6px;
  2043. padding:6px;
  2044. cursor:pointer;
  2045. }
  2046.  
  2047. .blay {
  2048. width:var(--MusicPlayer-Buttons-Size);
  2049. height:var(--MusicPlayer-Buttons-Size);
  2050. background:var(--MusicPlayer-Buttons-Color);
  2051. -webkit-mask-image:var(--blay);
  2052. }
  2053.  
  2054. .bause {
  2055. width:var(--MusicPlayer-Buttons-Size);
  2056. height:var(--MusicPlayer-Buttons-Size);
  2057. background:var(--MusicPlayer-Buttons-Color);
  2058. -webkit-mask-image:var(--bause);
  2059. }
  2060.  
  2061. .songtext {
  2062. margin-left:6px;
  2063. font-family:var(--SmallCaps-Font-Family);
  2064. font-size:calc(var(--SmallCaps-Font-Size) - .7px);
  2065. text-transform:uppercase;
  2066. letter-spacing:1px;
  2067. word-spacing:.5px;
  2068. color:var(--MusicPlayer-Text-Color);
  2069. }
  2070.  
  2071. .pausee {display:none;}
  2072.  
  2073. .beff {display:none;}
  2074. .aff {display:block;}
  2075.  
  2076. .uzmsg {
  2077. position:fixed;
  2078. bottom:0;margin-bottom:0;
  2079. left:0;margin-left:var(--SBW-Total);
  2080. width:calc(100% - var(--SBW-Total));
  2081. padding:14px 18px;
  2082. background:{color:desc bg};
  2083. border-top:1px solid {color:desc border};
  2084. color:{color:desc text};
  2085. line-height:185%;
  2086. box-sizing:border-box;
  2087. cursor:help;
  2088. z-index:9;
  2089. }
  2090.  
  2091. .uzmsg img {
  2092. display:inline-block;
  2093. margin-right:4px;
  2094. width:calc(var(--Body-Font-Size) * 2);
  2095. vertical-align:middle;
  2096. }
  2097.  
  2098. {CustomCSS}
  2099. </style>
  2100.  
  2101. </head>
  2102.  
  2103. <!------------------------------------------->
  2104.  
  2105. <body>
  2106.  
  2107. <!---- CORNER MUSIC PLAYER ---->
  2108. {block:ifmusicplayersongname}
  2109. <div class="mplayer">
  2110. <div class="zirc">
  2111. <i class="msym bsc-headphone-music"></i>
  2112. </div>
  2113.  
  2114. <div class="mline"></div>
  2115.  
  2116. <div class="potatowrap">
  2117. <div class="music-controls">
  2118. <div class="blay playy"></div>
  2119. <div class="bause pausee"></div>
  2120. </div>
  2121.  
  2122. <div class="songtext">{text:music player song name}</div>
  2123. </div>
  2124.  
  2125. <audio src="{text:music player song mp3}" id="musique" volume="69%"></audio>
  2126. </div>
  2127. {/block:ifmusicplayersongname}
  2128.  
  2129.  
  2130. <!---- MAIN CONTAINER ---->
  2131. <div class="tout">
  2132.  
  2133. <!---- left sidebar ---->
  2134. <div class="leftcont">
  2135. <div class="cheez-corn" shad="{select:desc box shadow}">
  2136. <div class="butain">
  2137. <a href="//{Name}.tumblr.com">
  2138. <span>home</span>
  2139. </a>
  2140.  
  2141. <a href="/ask">
  2142. <span>askbox</span>
  2143. </a>
  2144. <a href="/archive">
  2145. <span>archive</span>
  2146. </a>
  2147.  
  2148. <!-- please do not delete the credit thank u! -->
  2149. <a href="//glenthemes.tumblr.com" title="&#34;Asphyxia&#34; by glenthemes&#8194;ʚ(´◡`)ɞ">
  2150. <span>theme</span>
  2151. </a>
  2152. </div>
  2153.  
  2154. <div class="sb-desc">
  2155. {block:ifsidebardesc}
  2156. <div class="desc-body">{text:sidebar desc}</div>
  2157. {/block:ifsidebardesc}
  2158.  
  2159. {block:ifnotsidebardesc}
  2160. {block:Description}
  2161. <div class="desc-body">{Description}</div>
  2162. {/block:Description}
  2163. {/block:ifnotsidebardesc}
  2164. </div>
  2165. </div>
  2166. </div>
  2167.  
  2168. <!---- CUSTOM LINKS BAR ---->
  2169. <div class="leftdong">
  2170. <div class="md">
  2171. <div class="customlinks">
  2172. {block:ifcustomlink1name}
  2173. <a href="{text:customlink 1 url}" cl-1 title="{text:customlink 1 name}"></a>
  2174. {/block:ifcustomlink1name}
  2175.  
  2176. {block:ifcustomlink2name}
  2177. <a href="{text:customlink 2 url}" cl-2 title="{text:customlink 2 name}"></a>
  2178. {/block:ifcustomlink2name}
  2179.  
  2180. {block:ifcustomlink3name}
  2181. <a href="{text:customlink 3 url}" cl-3 title="{text:customlink 3 name}"></a>
  2182. {/block:ifcustomlink3name}
  2183.  
  2184. {block:ifcustomlink4name}
  2185. <a href="{text:customlink 4 url}" cl-4 title="{text:customlink 4 name}"></a>
  2186. {/block:ifcustomlink4name}
  2187.  
  2188. {block:ifcustomlink5name}
  2189. <a href="{text:customlink 5 url}" cl-5 title="{text:customlink 5 name}"></a>
  2190. {/block:ifcustomlink5name}
  2191.  
  2192. {block:ifcustomlink6name}
  2193. <a href="{text:customlink 6 url}" cl-6 title="{text:customlink 6 name}"></a>
  2194. {/block:ifcustomlink6name}
  2195.  
  2196. {block:ifcustomlink7name}
  2197. <a href="{text:customlink 7 url}" cl-7 title="{text:customlink 7 name}"></a>
  2198. {/block:ifcustomlink7name}
  2199.  
  2200. {block:ifcustomlink8name}
  2201. <a href="{text:customlink 8 url}" cl-8 title="{text:customlink 8 name}"></a>
  2202. {/block:ifcustomlink8name}
  2203. </div>
  2204. </div>
  2205. </div>
  2206.  
  2207. <!---- POSTS ---->
  2208. <div class="postscont" postw="{select:post width}" black-and-white="{select:grayscale images}">
  2209.  
  2210. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2211. <div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}">
  2212.  
  2213. <div class="postinner">
  2214.  
  2215. <!------ POST TITLE ------>
  2216. {block:Title}
  2217. <h1 class="post-title">{Title}</h1>
  2218. {/block:Title}
  2219.  
  2220. <!------ TEXT POSTS ------>
  2221. {block:Text}
  2222. {block:NotReblog}{Body}{/block:NotReblog}
  2223. {block:RebloggedFrom}
  2224. {block:Reblogs}
  2225. <div class="reblog-wrap">
  2226. <div class="reblog-head source-head">
  2227. <img src="{PortraitURL-64}">
  2228. <span class="reblog-url">
  2229. <a href="{Permalink}">{Username}</a>
  2230. </span>
  2231. </div>
  2232. <div class="reblog-comment">{Body}</div>
  2233. </div>
  2234. {/block:Reblogs}
  2235. {/block:RebloggedFrom}
  2236. {/block:Text}
  2237.  
  2238. <!------ SINGLE PHOTO ------>
  2239. {block:Photo}
  2240. <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>
  2241. {/block:Photo}
  2242.  
  2243. <!------ PHOTOSETS ------>
  2244. {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}
  2245.  
  2246. <!------ QUOTE POSTS ------>
  2247. {block:Quote}
  2248. <div class="quote-words">{Quote}</div>
  2249. {block:Source}
  2250. <div class="quote-source">
  2251. <span mdash>&mdash;</span>
  2252. {Source}
  2253. </div>{/block:Source}
  2254. {/block:Quote}
  2255.  
  2256. <!------ LINK POSTS ------>
  2257. {block:Link}
  2258. <a class="linkpost-title" href="{URL}" {Target}>
  2259. <span>{Name}</span>
  2260. <div class="linksym"></div>
  2261. </a>
  2262.  
  2263. {block:Excerpt}
  2264. <div class="link-excerpt">
  2265. {Excerpt}
  2266. {block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
  2267. </div>
  2268. {/block:Excerpt}
  2269.  
  2270. {block:Description}
  2271. <div class="link-description">
  2272. {block:NotReblog}{Description}{/block:NotReblog}
  2273. {block:RebloggedFrom}
  2274. {block:Reblogs}
  2275. <div class="reblog-wrap">
  2276. <div class="reblog-head">
  2277. <img src="{PortraitURL-64}">
  2278. <span class="reblog-url">
  2279. <a href="{Permalink}">{Username}</a>
  2280. </span>
  2281. </div>
  2282. <div class="reblog-comment">{Body}</div>
  2283. </div>
  2284. {/block:Reblogs}
  2285. {/block:RebloggedFrom}
  2286. </div>
  2287. {/block:Description}
  2288. {/block:Link}
  2289.  
  2290. <!------ CHAT POSTS ------>
  2291. {block:Chat}
  2292. <div class="chatwrap"
  2293. {block:Lines}
  2294. <div class="chat_row">
  2295. {block:Label}
  2296. <div class="chat_label">{Label}</div>
  2297. {/block:Label}
  2298.  
  2299. <div class="chat_content">
  2300. {Line}
  2301. </div>
  2302. </div>
  2303. {/block:Lines}
  2304. </div>
  2305. {/block:Chat}
  2306.  
  2307. <!------ AUDIO POSTS ------>
  2308. {block:Audio}
  2309. <div class="audiowrap">
  2310. {block:AudioPlayer}
  2311. <div class="aud-emb">
  2312. {AudioPlayer}
  2313. </div>
  2314. {/block:AudioPlayer}
  2315.  
  2316. <div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
  2317. {block:AlbumArt}
  2318. <img src="{AlbumArtURL}">
  2319. {/block:AlbumArt}
  2320.  
  2321. <div class="audplac"></div>
  2322.  
  2323. <div class="butts">
  2324. <div class="overplay"></div>
  2325. <div class="overpause"></div>
  2326. </div>
  2327. </div>
  2328.  
  2329. <div class="audiotxt">
  2330. <div class="odin">
  2331.  
  2332. <div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
  2333. <div class="untit">Untitled track</div>
  2334.  
  2335. {block:TrackName}
  2336. <div class="hastit">{TrackName}</div>
  2337. {/block:TrackName}
  2338. </div>
  2339.  
  2340. {block:Album}
  2341. <div class="aud-album-name">{Album}</div>
  2342. {/block:Album}
  2343.  
  2344. <div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
  2345. <div class="unart">Unknown artist</div>
  2346.  
  2347. {block:Artist}
  2348. <div class="hasart">{Artist}</div>
  2349. {/block:Artist}
  2350. </div>
  2351. </div><!--odin-->
  2352.  
  2353. <a class="inari" title="download" target="_blank">
  2354. <span class="int-all"></span>
  2355. </a>
  2356. </div><!--audiotxt-->
  2357. </div><!--audiowrap-->
  2358. {/block:Audio}
  2359.  
  2360. <!------ VIDEO POSTS ------>
  2361. {block:Video}
  2362. <div class="tmblr-video">{Video-500}</div>
  2363. {/block:Video}
  2364.  
  2365. <!------ ANSWER POSTS ------>
  2366. {block:Answer}
  2367. <!-- who asked? -->
  2368. <div class="reblog-wrap une_question">
  2369. <div class="asker-person reblog-head">
  2370. <div class="askpot">
  2371. <img src="{AskerPortraitURL-64}">
  2372. </div>
  2373.  
  2374. </div>
  2375.  
  2376. <div class="reblog-comment">
  2377. <span class="reblog-url">{Asker} asked:</span>
  2378. <div class="question_text">{Question}</div>
  2379. </div>
  2380. </div>
  2381.  
  2382. <!--------------------------------------->
  2383.  
  2384. <!-- who answered? -->
  2385. {block:Answerer}
  2386. <div class="reblog-wrap une_reponse">
  2387. <div class="answerer reblog-head">
  2388. <img src="{AnswererPortraitURL-64}">
  2389. <span class="reblog-url">{Answerer} answered:</span>
  2390. </div>
  2391. <p class="answer_text">{Answer}</p>
  2392. </div>
  2393.  
  2394. <!-- additional reblogs to the ask post -->
  2395. {block:Reblogs}
  2396. <div class="reblog-wrap reply_container">
  2397. <div class="replier reblog-head">
  2398. <img src="{PortraitURL-64}">
  2399. <span class="reblog-url">
  2400. <a href="{Permalink}">{Username}</a>
  2401. </span>
  2402. </div>
  2403. <div class="reply">{Body}</div>
  2404. </div>
  2405. {/block:Reblogs}
  2406. {/block:Answerer}
  2407.  
  2408. <!--------------------------------------->
  2409.  
  2410. <!-- original answer post -->
  2411. {block:NotReblog}
  2412. <div class="reblog-wrap une-reponse">
  2413. <div class="answerer reblog-head">
  2414. <img src="{PortraitURL-64}">
  2415. <span class="reblog-url">
  2416. <a href="{Permalink}">{Name}</a>
  2417. </span>
  2418. </div>
  2419.  
  2420. <div class="answer_text">{Answer}</div>
  2421. </div><!--answer-container-->
  2422. {/block:NotReblog}
  2423. {/block:Answer}
  2424. <!------ END ANSWER ------>
  2425.  
  2426. <!------ 'CAPTION'? ------>
  2427. {block:Caption}
  2428. <div class="caption">
  2429. {block:NotReblog}{Caption}{/block:NotReblog}
  2430. {block:RebloggedFrom}
  2431. {block:Reblogs}
  2432. <div class="reblog-wrap">
  2433. <div class="reblog-head">
  2434. <img src="{PortraitURL-64}">
  2435. <span class="reblog-url">
  2436. <a href="{Permalink}">{Username}</a>
  2437. </span>
  2438. </div><!--reblog-head-->
  2439. <div class="reblog-comment">{Body}</div>
  2440. </div><!--comment-container-->
  2441. {/block:Reblogs}
  2442. {/block:RebloggedFrom}
  2443. </div><!--caption-->
  2444. {/block:Caption}
  2445.  
  2446.  
  2447. <!------ TAGS ------>
  2448. {block:HasTags}
  2449. <div class="tagsdiv" clicktags="{select:click tags}">
  2450. <div class="tagsin">
  2451. {block:Tags}
  2452. <a href="{TagURL}">{Tag}</a>
  2453. {/block:Tags}
  2454. </div>
  2455. </div>
  2456. {/block:HasTags}
  2457. </div><!--postinner-->
  2458.  
  2459. <!------ PERMALINK ------>
  2460. {block:Date}
  2461. <div class="permadiv">
  2462. <div class="permaleft">
  2463. <a {block:IndexPage}href="{Permalink}"{/block:IndexPage}>
  2464. <i class="bsc-calendar-appointment-date"></i>
  2465. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} '{ShortYear}&ensp;{24HourWithZero}:{Minutes}
  2466. &ensp;&thinsp;{TimeAgo}</span>
  2467. {block:IndexPage}
  2468. &ensp;&thinsp;{NoteCountWithLabel}</span>
  2469. {block:PinnedPostLabel}&ensp;&thinsp;Pinned Post{/block:PinnedPostLabel}
  2470. {/block:IndexPage}
  2471. </a>
  2472. </div>
  2473.  
  2474. <!------------------------------>
  2475. {block:IndexPage}
  2476. <div class="permaright" clicktags="{select:click tags}">
  2477. {block:HasTags}
  2478. <a class="clicktags">
  2479. <span class="cp cp-tags-o"></span>
  2480. </a>
  2481. {/block:HasTags}
  2482.  
  2483. {block:RebloggedFrom}
  2484. <a href="{ReblogRootURL}" title="source: @{ReblogRootName}">
  2485. <i class="ph-user"></i>
  2486. </a>
  2487. {/block:RebloggedFrom}
  2488.  
  2489. <a href="{ReblogURL}" title="reblog this post">
  2490. <span class="cp cp-reblog-alt"></span>
  2491. </a>
  2492.  
  2493. <a title="like this post">
  2494. {LikeButton}
  2495. <span class="cp cp-heart-o"></span>
  2496. </a>
  2497. </div>
  2498. {/block:IndexPage}
  2499. <!------------------------------>
  2500.  
  2501. {block:PermalinkPage}
  2502. <div class="permaright">
  2503. {block:NotReblog}
  2504. original post
  2505. {/block:NotReblog}
  2506.  
  2507. {block:RebloggedFrom}
  2508. <a href="{ReblogParentURL}" title="@{ReblogParentName}">via</a>
  2509. <a dash>/</a>
  2510. <a href="{ReblogRootURL}" title="@{ReblogRootName}">source</a>
  2511. {/block:RebloggedFrom}
  2512. </div>
  2513. {/block:PermalinkPage}
  2514.  
  2515. </div><!--permadiv-->
  2516. {/block:Date}
  2517.  
  2518. {block:PostNotes}
  2519. <div class="notescont">
  2520. <h1>{NoteCountWithLabel}</h1>
  2521. {PostNotes}
  2522. </div>
  2523. {/block:PostNotes}
  2524. </div><!--posts-->
  2525.  
  2526. {/block:Posts}
  2527.  
  2528. <!------ PAGINATION ------>
  2529. {block:Pagination}
  2530. <div class="botpagi">
  2531. {block:PreviousPage}
  2532. <a class="flex" href="{PreviousPage}">
  2533. <div class="prev-svg"></div>
  2534. <span>previous page</span>
  2535. </a>
  2536. {/block:PreviousPage}
  2537.  
  2538. {block:NextPage}
  2539. <a class="flex pn" href="{NextPage}">
  2540. <span>next page</span>
  2541. <div class="next-svg"></div>
  2542. </a>
  2543. {/block:NextPage}
  2544. </div>
  2545. {/block:Pagination}
  2546. </div><!--postscont-->
  2547. </div><!--tout-->
  2548.  
  2549. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  2550.  
  2551. </body>
  2552. </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!