API tools faq
paste
glenthemes

Theme [09]: Radiance

glenthemes
Sep 26th, 2015 (edited)
19,788
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 99.29 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------
  2. Theme [09]: Radiance
  3. Made by glenthemes
  4.  
  5. Initial release: 2015/09/28
  6. Rework date: 2021/12/05
  7. Last updated: 2025/09/18
  8.  
  9. What's new:
  10. ✱ separate color for pagination
  11.  
  12. ------------------------------------------------------
  13.  
  14. 📖 PLEASE READ THE GUIDE: 📖
  15.  
  16. https://docs.google.com/presentation/d/1Ntb6G6nYOz4NcLfHYB_JyJvZPpXQvaQbYCNLttMGREM/edit?usp=sharing
  17.  
  18. ------------------------------------------------------
  19. TERMS OF USE:
  20. 1) Do not remove the theme credit.
  21. 2) Do not repost/redistribute my themes.
  22. 3) Do not take parts of the code and. use it as your own.
  23. 4) Do not use my themes as a base code.
  24. 5) Do not mix my themes together.
  25.  
  26. CREDITS:
  27. (⊃｡•́‿•̀｡)⊃ ~ glencredits.tumblr.com/radiance
  28. ----------------------------------------------------->
  29. <!DOCTYPE html>
  30. <html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" portrait="{PortraitURL-64}" {block:TagPage}tag-page{/block:TagPage} credit-pos="{select:theme credit location}">
  31.  
  32. <head>
  33.  
  34. <title>{Title}</title>
  35. <link rel="shortcut icon" href="{Favicon}">
  36.  
  37. {block:Description}
  38. <meta name="description" content="{MetaDescription}">
  39. {/block:Description}
  40.  
  41. <!-------- FONTS -------->
  42. <!-- google fonts -->
  43. <link href="//fonts.googleapis.com/css?family=Work+Sans:500|Cousine|Libre+Franklin:400,600|Manrope:500,700|Karla:400,700|Rubik:400,500|Open+Sans:400,600|Delius+Unicase:400,700|Archivo:400,700|Sen:400,700|Inter:400,600|Manjari:700" rel="stylesheet">
  44.  
  45. <!-------- ICON FONTS -------->
  46. <!-- phosphor icons -->
  47. <link rel="stylesheet" href="//unpkg.com/[email protected]/src/css/phosphor.css">
  48.  
  49. <!-- cappucicons -->
  50. <link href="//cappuccicons.gitlab.io/backup/icons.css" rel="stylesheet" crossorigin>
  51.  
  52. <!-- iconsax -->
  53. <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  54. <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
  55.  
  56. <!-- boobstrap -->
  57. <link rel="stylesheet" href="//glen-assets.github.io/bootstrap-icons/bootstrap-icons.css">
  58.  
  59. <!-------- PRELOAD -------->
  60. <link rel="preload" href="{image:sidebar image}" as="image">
  61. <link rel="preload" href="//glen-assets.github.io/fonts/Dharko Gilbert.ttf" as="font" type="font/ttf" 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="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  75.  
  76. <script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
  77. <script src="//glen-themes.gitlab.io/thms/09/tamago-kake-gohan.js"></script>
  78. <script src="//glen-themes.gitlab.io/thms/09/meat-buns.js"></script>
  79. <link href="//glen-themes.gitlab.io/thms/09/toss-to-me.css" rel="stylesheet">
  80.  
  81. <!-- unblue polls -->
  82. <!-- glenthemes.tumblr.com/post/708014819571302400 -->
  83. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  84. <style unblue-polls>
  85. .poll-post {
  86. --Poll-Question-Font-Size: var(--Body-Font-Size);
  87.  
  88. --Poll-Option-Background-Color: {color:post};
  89. --Poll-Option-Corner-Rounding: var(--Posts-Corner-Roundness);
  90. --Poll-Option-Border-Size: 1px;
  91. --Poll-Option-Border-Color: {color:post borders inner};
  92. --Poll-Option-Padding: 10px;
  93. --Poll-Option-Font-Size: var(--Body-Font-Size);
  94. --Poll-Option-Spacing: 10px;
  95. --Poll-Option-Text-Color: {color:text};
  96.  
  97. --Poll-Option-HOVER-Border-Color: {color:special border};
  98. --Poll-Option-HOVER-Background-Color: {color:special background};
  99. --Poll-Option-HOVER-Text-Color: {color:special text};
  100. --Poll-Option-HOVER-Speed: 0.4s;
  101. }
  102.  
  103. .poll-see-results {
  104. padding-bottom:0!important;
  105. border-bottom:none!important;
  106. font-size:calc(var(--Poll-Option-Font-Size) - .5px)!important;
  107. text-transform:uppercase;
  108. letter-spacing:1px;
  109. }
  110. </style>
  111.  
  112. <!-- npf audio player -->
  113. <!-- glenthemes.tumblr.com/post/722160746171072512 -->
  114. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  115. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  116. <script>
  117. tumblr_npf_audio({
  118. emptyTitleText: "Untitled track",
  119. emptyArtistText: "Untitled artist",
  120. emptyAlbumText: "Untitled album",
  121.  
  122. titleLabel: "",
  123. artistLabel: "",
  124. albumLabel: ""
  125. });
  126. </script>
  127. <style edit-npf-audio-player>
  128. .npf-audio-wrapper {
  129. --NPF-Audio-Buttons-Size: var(--Audio-Post-Buttons-Size);
  130. --NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
  131. --NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
  132. --NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
  133. --NPF-Audio-Image-Size: var(--Audio-Post-Album-Size);
  134. --NPF-Audio-Image-Spacing: 0px;
  135.  
  136. --t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
  137. --p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
  138. }
  139.  
  140. .npf-audio-wrapper {
  141. position:relative;
  142. background:{color:special background};
  143. border:1px solid {color:special border};
  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. </style>
  183.  
  184. <script src="//glen-npf.gitlab.io/other/neue.js"></script>
  185. <link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
  186.  
  187. <!-------- CUSTOMIZE PANEL OPTIONS -------->
  188. <!-- hi if you're reading this, GO BACK to edit! -->
  189. <!-- editing stuff here (the meta names) won't do anything -->
  190.  
  191. <meta name="image:&#x2B50; PLEASE READ THE GUIDE LINKED IN GREEN &#x2B50;" content="0">
  192. <meta name="image:sidebar image" content="//64.media.tumblr.com/e85f8d87d0566777da2368e0c1c9dbdf/aa56c24116a90bd2-a6/s2048x3072/01dd55682256a25dbb9b9c22b8818822d14bad42.png">
  193. <meta name="image:background image" content="//64.media.tumblr.com/d1decb703434224e8c01163304863f30/aa56c24116a90bd2-9c/s2048x3072/600a6ef52d711119d75e0e05b0ab67607a8ce14b.png">
  194. <meta name="image:header icon" content="//64.media.tumblr.com/7984dee5099820429a0dfd81d696a1a7/aa56c24116a90bd2-4c/s2048x3072/8b813497ea2d7af8d81e5888fe06faf8081ac3f4.png">
  195.  
  196. <meta name="image:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;" content="0">
  197.  
  198. <!----- COLORS ----->
  199. <meta name="color:background" content="#fdfdfd">
  200.  
  201. <meta name="color:sidebar hover background" content="#f5eee8">
  202. <meta name="color:sidebar corner title" content="#3f3f3c">
  203. <meta name="color:sidebar top icons" content="#262626">
  204.  
  205. <meta name="color:sidebar notif text A" content="#444">
  206. <meta name="color:sidebar notif text B" content="#736a65">
  207. <meta name="color:sidebar notif icon" content="#a59688">
  208.  
  209. <meta name="color:notif background" content="#fefefe">
  210.  
  211. <meta name="color:sidebar frame front" content="#eeebe9">
  212. <meta name="color:sidebar frame back" content="#eeebe9">
  213.  
  214. <meta name="color:sidebar title" content="#fcfcfc">
  215. <meta name="color:sidebar title outline" content="#d3c4b6">
  216. <meta name="color:sidebar title shadow" content="#e4d8c8">
  217.  
  218. <meta name="color:music player controls A" content="#efe7de">
  219. <meta name="color:music player controls B" content="#3f3f3c">
  220. <meta name="color:music player circle" content="#ff8b76">
  221. <meta name="color:music player background" content="#efe7de">
  222. <meta name="color:music player text" content="#67645c">
  223.  
  224. <meta name="color:customlinks background" content="#efe7de">
  225. <meta name="color:customlinks text" content="#888073">
  226.  
  227. <meta name="color:customlinks hover bg" content="#f5af96">
  228. <meta name="color:customlinks hover text" content="#fefefe">
  229.  
  230. <meta name="color:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;">
  231.  
  232. <!----- POST COLORS ----->
  233. <meta name="color:header icon border A" content="#f0f0f0">
  234. <meta name="color:header icon border B" content="#fefefe">
  235.  
  236. <meta name="color:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;">
  237.  
  238. <meta name="color:post" content="#fefefe">
  239. <meta name="color:text" content="#a39795">
  240. <meta name="color:bold" content="#f9bf8c">
  241. <meta name="color:italic" content="#fea78d">
  242. <meta name="color:link" content="#ff8b76">
  243. <meta name="color:reblogger name" content="#c3aea2">
  244.  
  245. <meta name="color:top permalink background" content="#fafafa">
  246. <meta name="color:top permalink border" content="#f0f0f0">
  247. <meta name="color:top permalink text" content="#888">
  248.  
  249. <meta name="color:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;">
  250.  
  251. <meta name="color:post menu border" content="#e9e9e9">
  252. <meta name="color:post menu background" content="#fff">
  253. <meta name="color:post menu text" content="#999">
  254. <meta name="color:post menu text hover" content="#ff8b7c">
  255.  
  256. <meta name="color:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;&#8202;">
  257.  
  258. <meta name="color:post borders outer" content="#eee">
  259. <meta name="color:post borders inner" content="#f2f2f2">
  260. <meta name="color:post shadow" content="#cba48f">
  261.  
  262. <meta name="color:special border" content="#efefef">
  263. <meta name="color:special background" content="#fafafa">
  264. <meta name="color:special text" content="#a39795">
  265.  
  266. <meta name="color:tags" content="#978a87">
  267.  
  268. <meta name="color:bottom permalink background" content="#fafafa">
  269. <meta name="color:bottom permalink border" content="#f0f0f0">
  270. <meta name="color:bottom permalink text" content="#888">
  271.  
  272. <meta name="color:post buttons" content="#857e7c">
  273. <meta name="color:like button liked" content="#ff8b76">
  274.  
  275. <meta name="color:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;">
  276.  
  277. <meta name="color:pagination" content="#a39795">
  278.  
  279. <meta name="color:scrollbar" content="#d1d1d1">
  280. <meta name="color:scrollbar background" content="#fdfdfd">
  281.  
  282. <meta name="color:text selection background" content="#f3eae6">
  283. <meta name="color:text selected" content="#a39795">
  284.  
  285. <meta name="select:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;">
  286.  
  287. <!-------- GENERAL OPTIONS -------->
  288. <meta name="select:font" title="Manrope" content="Manrope">
  289. <meta name="select:font" title="Rubik" content="Rubik">
  290. <meta name="select:font" title="Libre Franklin" content="Libre Franklin">
  291. <meta name="select:font" title="Karla" content="Karla">
  292. <meta name="select:font" title="Open Sans" content="Open Sans">
  293. <meta name="select:font" title="Archivo" content="Archivo">
  294. <meta name="select:font" title="Sen" content="Sen">
  295. <meta name="select:font" title="Inter" content="Inter">
  296.  
  297. <meta name="select:font size" title="12px" content="12px">
  298. <meta name="select:font size" title="10px" content="10px">
  299. <meta name="select:font size" title="11px" content="11px">
  300. <meta name="select:font size" title="13px" content="13px">
  301. <meta name="select:font size" title="14px" content="14px">
  302. <meta name="select:font size" title="15px" content="15px">
  303.  
  304. <meta name="select:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;">
  305.  
  306. <!-------- SIDEBAR OPTIONS -------->
  307. <meta name="select:sidebar width" title="250px" content="250px">
  308. <meta name="select:sidebar width" title="175px" content="175px">
  309. <meta name="select:sidebar width" title="200px" content="200px">
  310. <meta name="select:sidebar width" title="225px" content="225px">
  311. <meta name="select:sidebar width" title="275px" content="275px">
  312. <meta name="select:sidebar width" title="300px" content="300px">
  313. <meta name="select:sidebar width" title="325px" content="325px">
  314.  
  315. <meta name="select:sidebar corner title size" title="8px" content="8px">
  316. <meta name="select:sidebar corner title size" title="7px" content="7px">
  317. <meta name="select:sidebar corner title size" title="9px" content="9px">
  318. <meta name="select:sidebar corner title size" title="10px" content="10px">
  319. <meta name="select:sidebar corner title size" title="11px" content="11px">
  320. <meta name="select:sidebar corner title size" title="12px" content="12px">
  321. <meta name="select:sidebar corner title size" title="13px" content="13px">
  322.  
  323. <meta name="select:battery status" title="charging" content="-charging">
  324. <meta name="select:battery status" title="empty" content="">
  325. <meta name="select:battery status" title="half" content="-half">
  326. <meta name="select:battery status" title="full" content="-full">
  327.  
  328. <meta name="select:notif panel transparency" title="100%" content="1">
  329. <meta name="select:notif panel transparency" title="90%" content="0.9">
  330. <meta name="select:notif panel transparency" title="80%" content="0.8">
  331. <meta name="select:notif panel transparency" title="70%" content="0.7">
  332. <meta name="select:notif panel transparency" title="60%" content="0.6">
  333. <meta name="select:notif panel transparency" title="50%" content="0.5">
  334. <meta name="select:notif panel transparency" title="40%" content="0.4">
  335. <meta name="select:notif panel transparency" title="30%" content="0.3">
  336. <meta name="select:notif panel transparency" title="20%" content="0.2">
  337. <meta name="select:notif panel transparency" title="10%" content="0.1">
  338. <meta name="select:notif panel transparency" title="0%" content="0">
  339.  
  340. <meta name="select:notif transparency" title="50%" content="0.5">
  341. <meta name="select:notif transparency" title="10%" content="0.1">
  342. <meta name="select:notif transparency" title="20%" content="0.2">
  343. <meta name="select:notif transparency" title="30%" content="0.3">
  344. <meta name="select:notif transparency" title="40%" content="0.4">
  345. <meta name="select:notif transparency" title="60%" content="0.6">
  346. <meta name="select:notif transparency" title="70%" content="0.7">
  347. <meta name="select:notif transparency" title="80%" content="0.8">
  348. <meta name="select:notif transparency" title="90%" content="0.9">
  349. <meta name="select:notif transparency" title="100%" content="1">
  350.  
  351. <meta name="select:sidebar title size" title="40px" content="40px">
  352. <meta name="select:sidebar title size" title="30px" content="30px">
  353. <meta name="select:sidebar title size" title="35px" content="35px">
  354. <meta name="select:sidebar title size" title="45px" content="45px">
  355. <meta name="select:sidebar title size" title="50px" content="50px">
  356.  
  357. <meta name="select:sidebar title outline" title="yes" content="yes">
  358. <meta name="select:sidebar title outline" title="no" content="no">
  359.  
  360. <meta name="select:sidebar title shadow" title="yes" content="yes">
  361. <meta name="select:sidebar title shadow" title="no" content="no">
  362.  
  363. <meta name="select:sidebar frame front transparency" title="0%" content="0">
  364. <meta name="select:sidebar frame front transparency" title="10%" content="0.1">
  365. <meta name="select:sidebar frame front transparency" title="20%" content="0.2">
  366. <meta name="select:sidebar frame front transparency" title="30%" content="0.3">
  367. <meta name="select:sidebar frame front transparency" title="40%" content="0.4">
  368. <meta name="select:sidebar frame front transparency" title="50%" content="0.5">
  369. <meta name="select:sidebar frame front transparency" title="60%" content="0.6">
  370. <meta name="select:sidebar frame front transparency" title="70%" content="0.7">
  371. <meta name="select:sidebar frame front transparency" title="80%" content="0.8">
  372. <meta name="select:sidebar frame front transparency" title="90%" content="0.9">
  373. <meta name="select:sidebar frame front transparency" title="100%" content="1">
  374.  
  375.  
  376. <meta name="select:sidebar frame back transparency" title="0%" content="0">
  377. <meta name="select:sidebar frame back transparency" title="10%" content="0.1">
  378. <meta name="select:sidebar frame back transparency" title="20%" content="0.2">
  379. <meta name="select:sidebar frame back transparency" title="30%" content="0.3">
  380. <meta name="select:sidebar frame back transparency" title="40%" content="0.4">
  381. <meta name="select:sidebar frame back transparency" title="50%" content="0.5">
  382. <meta name="select:sidebar frame back transparency" title="60%" content="0.6">
  383. <meta name="select:sidebar frame back transparency" title="70%" content="0.7">
  384. <meta name="select:sidebar frame back transparency" title="80%" content="0.8">
  385. <meta name="select:sidebar frame back transparency" title="90%" content="0.9">
  386. <meta name="select:sidebar frame back transparency" title="100%" content="1">
  387.  
  388. <meta name="select:customlinks per row" title="4" content="4">
  389. <meta name="select:customlinks per row" title="1" content="1">
  390. <meta name="select:customlinks per row" title="2" content="2">
  391. <meta name="select:customlinks per row" title="3" content="3">
  392.  
  393. <meta name="select:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;">
  394.  
  395. <!-------- GAPS BETWEEN POST & SIDEBARS -------->
  396. <meta name="select:center gaps" title="60px" content="60px">
  397. <meta name="select:center gaps" title="20px" content="20px">
  398. <meta name="select:center gaps" title="30px" content="30px">
  399. <meta name="select:center gaps" title="35px" content="35px">
  400. <meta name="select:center gaps" title="40px" content="40px">
  401. <meta name="select:center gaps" title="45px" content="45px">
  402. <meta name="select:center gaps" title="55px" content="55px">
  403. <meta name="select:center gaps" title="50px" content="50px">
  404. <meta name="select:center gaps" title="55px" content="55px">
  405. <meta name="select:center gaps" title="65px" content="65px">
  406. <meta name="select:center gaps" title="70px" content="70px">
  407. <meta name="select:center gaps" title="75px" content="75px">
  408. <meta name="select:center gaps" title="80px" content="80px">
  409.  
  410. <!-------- POST OPTIONS -------->
  411. <meta name="select:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;&#8202;">
  412.  
  413. <meta name="select:header icon size" title="64px" content="64px">
  414. <meta name="select:header icon size" title="32px" content="32px">
  415. <meta name="select:header icon size" title="40px" content="40px">
  416. <meta name="select:header icon size" title="48px" content="48px">
  417. <meta name="select:header icon size" title="56px" content="56px">
  418. <meta name="select:header icon size" title="72px" content="72px">
  419. <meta name="select:header icon size" title="80px" content="80px">
  420.  
  421. <meta name="select:header icon type" title="soft" content="soft">
  422. <meta name="select:header icon type" title="round" content="round">
  423. <meta name="select:header icon type" title="square" content="square">
  424.  
  425. <!------------------------------>
  426.  
  427. <meta name="select:post width" title="500px" content="500px">
  428. <meta name="select:post width" title="400px" content="400px">
  429. <meta name="select:post width" title="425px" content="425px">
  430. <meta name="select:post width" title="450px" content="450px">
  431. <meta name="select:post width" title="475px" content="475px">
  432. <meta name="select:post width" title="520px" content="520px">
  433. <meta name="select:post width" title="540px" content="540px">
  434. <meta name="select:post width" title="600px" content="600px">
  435.  
  436. <meta name="select:post shadow transparency" title="90%" content="0.9">
  437. <meta name="select:post shadow transparency" title="0%" content="0">
  438. <meta name="select:post shadow transparency" title="10%" content="0.1">
  439. <meta name="select:post shadow transparency" title="20%" content="0.2">
  440. <meta name="select:post shadow transparency" title="30%" content="0.3">
  441. <meta name="select:post shadow transparency" title="40%" content="0.4">
  442. <meta name="select:post shadow transparency" title="50%" content="0.5">
  443. <meta name="select:post shadow transparency" title="60%" content="0.6">
  444. <meta name="select:post shadow transparency" title="70%" content="0.7">
  445. <meta name="select:post shadow transparency" title="80%" content="0.8">
  446. <meta name="select:post shadow transparency" title="100%" content="1">
  447.  
  448. <meta name="select:post padding" title="14px" content="14px">
  449. <meta name="select:post padding" title="0px" content="0px">
  450. <meta name="select:post padding" title="10px" content="10px">
  451. <meta name="select:post padding" title="18px" content="18px">
  452. <meta name="select:post padding" title="22px" content="22px">
  453.  
  454. <meta name="select:photoset spacing" title="4px" content="4px">
  455. <meta name="select:photoset spacing" title="2px" content="2px">
  456. <meta name="select:photoset spacing" title="6px" content="6px">
  457. <meta name="select:photoset spacing" title="8px" content="8px">
  458. <meta name="select:photoset spacing" title="10px" content="10px">
  459.  
  460. <meta name="select:grayscale images" title="off" content="off">
  461. <meta name="select:grayscale images" title="reblogger icon only" content="rb-ico">
  462. <meta name="select:grayscale images" title="everything in posts" content="everything">
  463.  
  464. <meta name="select:click tags" title="yes" content="yes">
  465. <meta name="select:click tags" title="no" content="no">
  466.  
  467. <meta name="select:post spacing" title="50px" content="50px">
  468. <meta name="select:post spacing" title="25px" content="25px">
  469. <meta name="select:post spacing" title="30px" content="30px">
  470. <meta name="select:post spacing" title="35px" content="35px">
  471. <meta name="select:post spacing" title="40px" content="40px">
  472. <meta name="select:post spacing" title="45px" content="45px">
  473. <meta name="select:post spacing" title="55px" content="55px">
  474. <meta name="select:post spacing" title="60px" content="60px">
  475. <meta name="select:post spacing" title="65px" content="65px">
  476. <meta name="select:post spacing" title="70px" content="70px">
  477. <meta name="select:post spacing" title="75px" content="75px">
  478.  
  479. <meta name="select:&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; &#x2740;&bull;&deg;&#x2740;&deg;&bull;&#x2740; &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#8202;&#8202;&#8202;&#8202;">
  480.  
  481. <meta name="select:theme credit location" title="bottom corner" content="bot">
  482. <meta name="select:theme credit location" title="sidebar" content="in-sb">
  483.  
  484. <meta name="select:tumblr controls color" title="white" content="white">
  485. <meta name="select:tumblr controls color" title="black" content="black">
  486.  
  487. <meta name="select:background image type" title="small" content="repeat">
  488. <meta name="select:background image type" title="large" content="full">
  489.  
  490. <meta name="if:show music player" content="1">
  491. <meta name="if:show music player" content="0">
  492.  
  493. <!--------- TEXT FIELDS --------->
  494. <meta name="text:description" content="Maybe love is &lt;i&gt;not supposed to be&lt;/i&gt; like fireworks, shortness of breath, or powerful oceans. Maybe love is the &lt;b&gt;kiss of sunlight&lt;/b&gt; on cold, goosebumped skin. Maybe love is the pure and gentle beauty of the most ordinary things, and we simply aren&rsquo;t looking close enough to see it. &amp;mdash; &lt;a href=&quot;https://wnq-writers.tumblr.com/post/148226119736&quot; title=&quot;@slow-it-down-dear&quot;&gt;Z.M.&lt;/a&gt;">
  495.  
  496. <meta name="text:sidebar corner title" content="As long as I'm here, you're invincible.">
  497. <meta name="text:sidebar vertical title" content="radiance">
  498.  
  499. <meta name="text:&#x2B50; PLEASE READ THIS GUIDE &#x2B50;" content="docs.google.com/presentation/d/1Ntb6G6nYOz4NcLfHYB_JyJvZPpXQvaQbYCNLttMGREM/edit?usp=sharing">
  500.  
  501. <!-- DO NOT EDIT STUFF HERE, PRESS THE BACK ARROW -->
  502.  
  503. <meta name="text:sidebar hover notifs" content="***&NewLine;[img][https://static.tumblr.com/2pnwama/NM8s1ps29/yachi.jpeg]&NewLine;[msg][&#x201C;you did WHAAT?!&#x201D;]&NewLine;[icon-name][message-dots]&NewLine;[sender][(&#x3E;&#x15DC;&#x3C;)&#x2606; YACHI-SAN]">
  504.  
  505. <!-------------------------------->
  506.  
  507. <meta name="text:&#x2B50; HOW TO LINK MUSIC &#x2B50;" content="linktr.ee/direct_file_links">
  508.  
  509. <!-- DO NOT EDIT STUFF HERE, PRESS THE BACK ARROW -->
  510.  
  511. <meta name="text:music song 1 name" content="&#xA4B0; Baby Bird &#xA4B1; &ndash; Hayashi Yuuki">
  512. <meta name="text:music song 1 mp3" content="https://rhizo.gitlab.io/m/Baby_Bird.mp3">
  513. <meta name="text:music song 1 volume" content="80%">
  514.  
  515. <meta name="text:music song 2 name" content="&#xA4B0; Evolution &#xA4B1; &ndash; Hayashi Yuuki, Tachibana Asami">
  516. <meta name="text:music song 2 mp3" content="https://rhizo.gitlab.io/m/Evolution.mp3">
  517. <meta name="text:music song 2 volume" content="100%">
  518.  
  519. <meta name="text:music song 3 name" content="&#xA4B0; &#x30CF;&#x30FC;&#x30B1;&#x30F3; &#xA4B1; &ndash; Hayashi Yuuki">
  520. <meta name="text:music song 3 mp3" content="https://rhizo.gitlab.io/m/Piton.mp3">
  521. <meta name="text:music song 3 volume" content="100%">
  522.  
  523. <meta name="text:customlink 1 name" content="sample link">
  524. <meta name="text:customlink 1 url" content="https://youtube.com/watch?v=ZkNMZlkrzaU">
  525. <meta name="text:customlink 2 name" content="">
  526. <meta name="text:customlink 2 url" content="">
  527. <meta name="text:customlink 3 name" content="">
  528. <meta name="text:customlink 3 url" content="">
  529. <meta name="text:customlink 4 name" content="">
  530. <meta name="text:customlink 4 url" content="">
  531. <meta name="text:customlink 5 name" content="">
  532. <meta name="text:customlink 5 url" content="">
  533. <meta name="text:customlink 6 name" content="">
  534. <meta name="text:customlink 6 url" content="">
  535. <meta name="text:customlink 7 name" content="">
  536. <meta name="text:customlink 7 url" content="">
  537. <meta name="text:customlink 8 name" content="">
  538. <meta name="text:customlink 8 url" content="">
  539.  
  540. <meta name="text:how to change the icon &#8211; go to this website, pick an icon you like, copy its name (don't click on it) and replace 'sparkle' with your icon name" content="https://phosphoricons.com/#toolbar">
  541. <meta name="text:bottom permalink icon" content="sparkle">
  542.  
  543. <!--------------------------------------------------->
  544.  
  545. <style type="text/css">
  546.  
  547. @font-face { font-family: "dharko gilbert"; src: url('//glen-assets.github.io/fonts/Dharko Gilbert.ttf'); }
  548.  
  549. /*-------- TUMBLR CONTROLS --------*/
  550. iframe#tumblr_controls, .iframe-controls--desktop {
  551. top:5px!important;
  552. right:5px!important;
  553. position:fixed!important;
  554.  
  555. transform:scale(0.65,0.65);
  556. -webkit-transform:scale(0.65,0.65);
  557.  
  558. transform-origin:100% 0;
  559. z-index:11!important;
  560. user-select:none;
  561. }
  562.  
  563. [tumblr-controls="black"] iframe#tumblr_controls,
  564. [tumblr-controls="black"] .iframe-controls--desktop {
  565. filter:invert(100%) hue-rotate(180deg)!important;
  566. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  567. }
  568.  
  569. .tmblr-iframe--follow-teaser, .follow-teaser, .iframe-controls--phone-mobile, .tmblr-iframe--app-cta-button {
  570. display:none!important;
  571. }
  572.  
  573. /*------- SCROLLBAR --------*/
  574. ::-webkit-scrollbar {
  575. width:var(--Scrollbar-Padding);
  576. height:0;
  577. background-color:{color:scrollbar background};
  578. }
  579.  
  580. ::-webkit-scrollbar-thumb {
  581. background-color:{color:scrollbar};
  582. border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
  583. border-top:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
  584. border-bottom:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
  585. background-clip:padding-box;
  586. }
  587.  
  588. ::-webkit-scrollbar-corner {
  589. background:{color:scrollbar background};
  590. }
  591.  
  592. /*------- TOOLTIPS --------*/
  593. #s-m-t-tooltip {
  594. padding:8px 9px 5px 9px;
  595.  
  596. margin:17px;
  597. background-color:{color:post};
  598. border-radius:2px;
  599. border:1px solid rgba({RGBcolor:text},0.25);
  600. font-family:var(--SmallCaps-Font-Family);
  601. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  602. letter-spacing:1px;
  603. text-transform:uppercase;
  604. color:{color:text};
  605. line-height:var(--Line-Height);
  606. z-index:99;
  607. max-width:40vw;
  608. }
  609.  
  610. /*---- GLOBAL FONT SETTINGS -----*/
  611. [font]{
  612. font-family:var(--Body-Font-Family);
  613. font-size:var(--Body-Font-Size);
  614. color:var(--Body-Text-Color);
  615. }
  616.  
  617. [font="Libre Franklin"]{
  618. font-size:calc(var(--Body-Font-Size) - .5px)!important;
  619. letter-spacing:0.1px;
  620. }
  621.  
  622. [font="Manrope"],
  623. [font="Archivo"]{
  624. font-size:calc(var(--Body-Font-Size) - .7px)!important;
  625. letter-spacing:0.3px;
  626. }
  627.  
  628. [font="Inter"]{
  629. font-size:calc(var(--Body-Font-Size) - .7px)!important;
  630. }
  631.  
  632. [font="Rubik"]{
  633. font-weight:400;
  634. }
  635.  
  636. /*------- TEXT HIGHLIGHT --------*/
  637. ::selection {
  638. background:{color:text selection background};
  639. color:{color:text selected};
  640. }
  641.  
  642. ::-moz-selection {
  643. background:{color:text selection background};
  644. color:{color:text selected};
  645. }
  646.  
  647. /*------- BASICS --------*/
  648. html, body {
  649. scrollbar-width:thin; /* firefox only */
  650. }
  651.  
  652. body {
  653. margin:0;
  654. background-color:{color:background};
  655. background-image:url('{image:background image}');
  656. background-attachment:fixed;
  657. overscroll-behavior-y:none;
  658. }
  659.  
  660. [bg-type="repeat"] body {
  661. background-repeat:repeat;
  662. }
  663.  
  664. [bg-type="full"] body {
  665. background-repeat:no-repeat;
  666. background-size:cover;
  667. background-position:center;
  668. }
  669.  
  670. a {
  671. text-decoration:none;
  672. color:var(--Link);
  673. }
  674.  
  675. a[title][class*="smt-current-element"]:not([href]){
  676. cursor:help;
  677. }
  678.  
  679. a[title=""]:not([href]){
  680. cursor:initial;
  681. }
  682.  
  683. p {
  684. margin:var(--Paragraph-Margins) 0;
  685. }
  686.  
  687. blockquote {
  688. margin:var(--Paragraph-Margins);
  689. margin-right:0;
  690. padding-left:var(--Paragraph-Margins);
  691. border-left:1px solid rgba({RGBcolor:text},0.169);
  692. }
  693.  
  694. h1, h2, h3, h4, h5, h6, .linkpost-title {
  695. margin:var(--Heading-Margins) 0;
  696. font-family:var(--Heading-Font-Family);
  697. font-size:var(--Body-Font-Size);
  698. text-transform:uppercase;
  699. letter-spacing:.3px;
  700. word-spacing:.7px;
  701. line-height:calc(var(--Line-Height) * 1.1);
  702. }
  703.  
  704. img, iframe {
  705. vertical-align:middle;
  706. max-width:100%;
  707. }
  708.  
  709. figure {
  710. margin:0;
  711. }
  712.  
  713. pre, code {
  714. white-space:pre-wrap;
  715. font-family:cousine;
  716. font-size:calc(var(--Body-Font-Size) - 2px);
  717. background:{color:special background};
  718. border:1px solid {color:special border};
  719. color:{color:special text};
  720. }
  721.  
  722. pre {
  723. padding:0.8em 1em;
  724. }
  725.  
  726. code {
  727. padding:3px 4px;
  728. }
  729.  
  730. hr {
  731. display:block;
  732. margin:var(--Heading-Margins) auto;
  733. border-width:0px;
  734. width:69%;
  735. height:1px;
  736. background:{color:post borders inner};
  737. }
  738.  
  739. a.read_more {
  740. display:block;
  741. margin-bottom:-3px;
  742. font-family:var(--SmallCaps-Font-Family);
  743. font-size:calc(var(--SmallCaps-Font-Size) + 2px);
  744. text-transform:uppercase;
  745. letter-spacing:.7px;
  746. text-align:center;
  747. }
  748.  
  749. ul, ol {
  750. margin:var(--Paragraph-Margins) 0;
  751. margin-left:1.69em;
  752. padding:0;
  753. }
  754.  
  755. ol li {
  756. padding-left:0.420em;
  757. }
  758.  
  759. ul li {
  760. position:relative;
  761. padding-left:0.25em;
  762. margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
  763. list-style:none;
  764. }
  765.  
  766. ul li:before {
  767. content:"";
  768. position:absolute;
  769. margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
  770. transform:translateY(-50%);
  771. left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
  772. width:var(--Body-Font-Size);
  773. height:.7px;
  774. background:rgba({RGBcolor:text},0.420);
  775. }
  776.  
  777. b, strong {
  778. color:{color:bold};
  779. }
  780.  
  781. [font="Manrope"] b, [font="Manrope"] strong,
  782. [font="Archivo"] b, [font="Archivo"] strong,
  783. [font="Karla"] b, [font="Karla"] strong {
  784. font-weight:700;
  785. }
  786.  
  787. [font="Open Sans"] b, [font="Open Sans"] strong,
  788. [font="Sen"] b, [font="Sen"] strong,
  789. [font="Inter"] b, [font="Inter"] strong,
  790. [font="Libre Franklin"] b, [font="Libre Franklin"] strong {
  791. font-weight:600;
  792. }
  793.  
  794. [font="Rubik"] b, [font="Rubik"] strong {
  795. font-weight:500;
  796. }
  797.  
  798. i:not([class]), em:not([class]){
  799. color:{color:italic};
  800. }
  801.  
  802. .flex, [flex]{
  803. display:flex!important;
  804. align-items:center;
  805. }
  806.  
  807. svg {
  808. pointer-events:none;
  809. }
  810.  
  811. :root {
  812. /*--- SIDEBAR SETTINGS ---*/
  813. --Sidebar-Width:{select:sidebar width};
  814.  
  815. --Sidebar-Top-Icons-Size:12px;
  816. --Sidebar-Top-Icons-Spacing:7px;
  817. --Sidebar-Top-Icons-Edge-Offset:10px;
  818.  
  819. --Sidebar-Desc-Width:80%;
  820. --Sidebar-Desc-Width-INT:0.8; /* divide above number by 100 */
  821.  
  822. --Sidebar-Avatar-Size:28px;
  823. --Sidebar-Notif-Padding:10px;
  824. --Sidebar-Notif-Corner-Roundness:5px;
  825. --Sidebar-Notif-Row-Spacing:8px;
  826. --Sidebar-Notif-Dismiss-Speed:350ms;
  827. --Sidebar-Notif-Dismiss-Speed-INT:350;
  828.  
  829. --Sidebar-Vertical-Title-Size:{select:sidebar title size};
  830. --Sidebar-Image-Roundness:3px;
  831. --Sidebar-Image-Frame-Front-Roundness:3px;
  832. --Sidebar-Image-Frame-Back-Roundness:3px;
  833. --Sidebar-Frame-Indent:10px;
  834.  
  835. --MusicPlayer-Icon-Size:12px;
  836. --MusicPlayer-Icon-Spacing:9px;
  837. --MusicPlayer-Icon-Padding:10px;
  838.  
  839. --MusicPlayer-Padding:10px;
  840. --MusicPlayer-Text-Size:8px;
  841. --MusicPlayer-Text-Fade-Speed:200ms;
  842. --MusicPlayer-Text-Fade-Speed-RAW:200;
  843.  
  844. --Autoplay-First-Song:no;
  845. --Autoplay-Next-Song:yes;
  846. --Loop-Playlist-Infinitely:yes;
  847.  
  848. --CustomLinks-Per-Row:{select:customlinks per row};
  849. --CustomLinks-Font-Size:calc(var(--SmallCaps-Font-Size) - 1px);
  850. --CustomLinks-Padding:7px;
  851. --CustomLinks-Spacing:7px;
  852.  
  853. --Center-Aisle-Gaps:{select:center gaps};
  854.  
  855. /*--- POST SETTINGS ---*/
  856. --Header-Icon-Size:{select:header icon size};
  857. --Header-Icon-Padding:5px;
  858.  
  859. --Desc-Left-Gap:15px;
  860. --Desc-Box-Padding:15px;
  861.  
  862. --Paragraph-Margins:1em;
  863. --Heading-Margins:1em;
  864.  
  865. --Body-Font-Family:{select:font};
  866. --Body-Font-Size:{select:font size};
  867. --Body-Text-Color:{color:text};
  868.  
  869. --Line-Height:1.7em; /* line-height with suffix */
  870. --Line-Height-INT:1.7; /* line-height without suffix */
  871.  
  872. --Heading-Font-Family:"Delius Unicase";
  873. --Heading-Font-Size:calc(var(--Body-Font-Size) + 1px);
  874.  
  875. --SmallCaps-Font-Family:"Manjari";
  876. --SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 3px);
  877.  
  878. --Post-Width:{select:post width};
  879. --Post-Shadow-Size:10px;
  880. --Post-Padding:{select:post padding};
  881. --Post-Spacing:{select:post spacing};
  882.  
  883. --Posts-Corner-Roundness:3px;
  884. --Dots-Menu-Icon-Size:calc(var(--Body-Font-Size) + 4px);
  885. --Post-Menu-Roundness:3px;
  886. --Post-Menu-Padding:7px;
  887. --Post-Menu-Fade-Speed:0.420s;
  888.  
  889. --Reblogger-Avatar-Size:22px;
  890. --Reblogger-Avatar-Gap-Right:8px;
  891. --Reblogger-Username-Color:{color:reblogger name};
  892. --Reblogger-Avatar-Bottom-Gap:9px;
  893.  
  894. --Reblogs-Spacing:15px;
  895. --Reblogs-Border:{color:post borders inner};
  896.  
  897. --Captions-Gap:15px;
  898. --NPF-Caption-Spacing:var(--Captions-Gap);
  899.  
  900. --Photoset-Spacing:{select:photoset spacing};
  901. --NPF-Image-Spacing:var(--Photoset-Spacing);
  902.  
  903. --Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
  904. --Grayscale-Transition-Speed:0.269s;
  905.  
  906. --AskerPortrait-Size:42px;
  907. --AskerPortrait-Padding:6px;
  908.  
  909. --Audio-Post-Album-Size:64px;
  910. --Audio-Post-Album-Right-Gap:13px;
  911. --Audio-Post-Buttons-Size:11px;
  912. --Audio-Post-Buttons-Color:{color:special text};
  913. --Audio-Post-Buttons-Padding:11px;
  914. --Audio-Post-Buttons-Background:{color:special background};
  915.  
  916. --Link:{color:link};
  917. --Post-Borders-Inner:{color:post borders inner};
  918.  
  919. --Quote-Font-Family:var(--Heading-Font-Family);
  920. --Quote-Font-Size:calc(var(--Body-Font-Size) - 1px);
  921.  
  922. --Asker-Avatar-Size:35px;
  923. --Asker-Avatar-Padding:4px;
  924.  
  925. /*--- TAGS SETTINGS ---*/
  926. --Tags-Fade-Speed-MS:269; /* fade speed without suffix */
  927. --Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
  928. --Tags-Spacing:4px;
  929.  
  930. /*--- PERMALINK SETTINGS ---*/
  931. --Permalink-Text-Spacing:14px;
  932.  
  933. /*--- POST BUTTONS SETTINGS ---*/
  934. --Post-Buttons-Size:var(--Body-Font-Size);
  935. --Post-Buttons-Color:{color:post buttons};
  936. --Like-Button-Liked:{color:like button liked};
  937. --Post-Buttons-Spacing:4px;
  938.  
  939. /*--- POST NOTES SETTINGS ---*/
  940. --Notes-Indicator-Size:14px;
  941. --Notes-Indicator-Gap-Right:7px;
  942. --Notes-Row-Spacing:9px;
  943.  
  944. /*--- MISC ---*/
  945. --Pagination-Color:{color:pagination};
  946.  
  947. --TumblrControls-Color:{select:tumblr controls color};
  948.  
  949. --Scrollbar-Padding:13px;
  950. }
  951.  
  952. /*---- MAIN CONTENT CONTAINER ----*/
  953. .mynoots {
  954. margin:auto;
  955. text-align:center;
  956. }
  957.  
  958. .nymoots {
  959. display:inline-block;
  960. text-align:initial;
  961. margin-left:var(--Post-Shadow-Size);
  962. }
  963.  
  964. .ensoot {
  965. display:flex;
  966. flex-wrap:nowrap;
  967. }
  968.  
  969. /*---- LEFT SIDEBAR ----*/
  970. .left-sb {
  971. position:fixed;
  972. margin-left:calc(var(--Sidebar-Vertical-Title-Size) / -2);
  973. width:var(--Sidebar-Width);
  974. height:100vh;
  975. display:table;
  976. z-index:9;
  977. }
  978.  
  979. .lbs {
  980. display:table-cell;
  981. vertical-align:middle;
  982. }
  983.  
  984. .el-present {
  985. position:relative;
  986. width:var(--Sidebar-Width);
  987. {block:ifshowmusicplayer}
  988. padding-bottom:calc(var(--MusicPlayer-Text-Size) + (var(--MusicPlayer-Padding) * 2));
  989. {/block:ifshowmusicplayer}
  990. }
  991.  
  992. /*---- SIDEBAR FRAME FRONT ----*/
  993. .el-present:before {
  994. content:"";
  995. position:absolute;
  996. top:0;margin-top:var(--Sidebar-Frame-Indent);
  997. left:0;margin-left:calc(0px - var(--Sidebar-Frame-Indent));
  998. width:100%;
  999. height:100%;
  1000. border:1px solid rgba({RGBcolor:sidebar frame front},calc(1 - {select:sidebar frame front transparency}));
  1001. box-sizing:border-box;
  1002. mix-blend-mode:color-dodge;
  1003. border-radius:var(--Sidebar-Image-Frame-Front-Roundness);
  1004. z-index:3;
  1005. }
  1006.  
  1007. /*---- SIDEBAR FRAME BACK ----*/
  1008. .el-present:after {
  1009. content:"";
  1010. position:absolute;
  1011. top:0;margin-top:calc(0px - var(--Sidebar-Frame-Indent));
  1012. right:0;margin-right:calc(0px - var(--Sidebar-Frame-Indent));
  1013. width:100%;
  1014. height:100%;
  1015. border:1px solid rgba({RGBcolor:sidebar frame back},calc(1 - {select:sidebar frame back transparency}));
  1016. box-sizing:border-box;
  1017. border-radius:var(--Sidebar-Image-Frame-Back-Roundness);
  1018. z-index:-1;
  1019. }
  1020.  
  1021. /*---- MAIN SIDEBAR IMAGE ----*/
  1022. .moolait {
  1023. position:relative;
  1024. }
  1025.  
  1026. .moolait:after {
  1027. content:"";
  1028. position:absolute;
  1029. top:0;
  1030. left:0;
  1031. width:100%;
  1032. height:100%;
  1033. z-index:-1;
  1034. }
  1035.  
  1036. .moolait, .moolait:after {
  1037. background:{color:sidebar hover background};
  1038.  
  1039. {block:ifshowmusicplayer}
  1040. border-radius:var(--Sidebar-Image-Roundness) var(--Sidebar-Image-Roundness) 0 0;
  1041. {/block:ifshowmusicplayer}
  1042.  
  1043. {block:ifnotshowmusicplayer}
  1044. border-radius:var(--Sidebar-Image-Roundness);
  1045. {/block:ifnotshowmusicplayer}
  1046. }
  1047.  
  1048. .mooed .main-sb-img {
  1049. opacity:0;
  1050. }
  1051.  
  1052. .main-sb-img {
  1053. width:100%;
  1054. height:auto;
  1055.  
  1056. {block:ifshowmusicplayer}
  1057. border-radius:var(--Sidebar-Image-Roundness) var(--Sidebar-Image-Roundness) 0 0;
  1058. {/block:ifshowmusicplayer}
  1059.  
  1060. {block:ifnotshowmusicplayer}
  1061. border-radius:var(--Sidebar-Image-Roundness);
  1062. {/block:ifnotshowmusicplayer}
  1063.  
  1064. transition:opacity 0.420s ease-in-out; /* mouse leave */
  1065. }
  1066.  
  1067. .mooed .main-sb-img {
  1068. transition:opacity 0.25s ease-in-out; /* mouse enter */
  1069. }
  1070.  
  1071. .main-sb-img::-moz-selection {background:transparent;}
  1072. .main-sb-img::selection {background:transparent;}
  1073.  
  1074. /*---- SIDEBAR TOP ROW ----*/
  1075. .martiny {
  1076. position:absolute;
  1077. top:0;margin-top:calc(var(--Sidebar-Frame-Indent) + 1px + var(--Sidebar-Top-Icons-Edge-Offset));
  1078. left:0;margin-left:calc(1px + var(--Sidebar-Top-Icons-Edge-Offset));
  1079. width:calc(100% - 2px - var(--Sidebar-Frame-Indent) - (var(--Sidebar-Top-Icons-Edge-Offset) * 2));
  1080. display:flex;
  1081. align-items:center;
  1082. justify-content:space-between;
  1083. z-index:13;
  1084. }
  1085.  
  1086. .bubun {
  1087. position:relative;
  1088. overflow:hidden;
  1089. display:flex;
  1090. align-items:center;
  1091. margin-left:2px;
  1092. margin-right:5px;
  1093. font-family:delius unicase;
  1094. text-transform:uppercase;
  1095. font-size:{select:sidebar corner title size};
  1096. color:{color:sidebar corner title};
  1097. letter-spacing:.5px;
  1098. word-spacing:.7px;
  1099. line-height:1em;
  1100. white-space:nowrap;
  1101. z-index:5;
  1102. }
  1103.  
  1104. .bubun span {
  1105. display:block;
  1106. height:100%;
  1107. }
  1108.  
  1109. .moomoo {
  1110. transform:translateX(100%);
  1111. animation:scroll-left 6.9s linear infinite;
  1112. }
  1113.  
  1114. .tubbz {
  1115. display:flex;
  1116. align-items:center;
  1117. z-index:5;
  1118. }
  1119.  
  1120. .tubbz > * {
  1121. display:block;
  1122. margin-left:var(--Sidebar-Top-Icons-Spacing);
  1123. line-height:var(--Sidebar-Top-Icons-Size);
  1124. }
  1125.  
  1126. .tubbz .bi {
  1127. font-size:var(--Sidebar-Top-Icons-Size);
  1128. color:{color:sidebar top icons};
  1129. }
  1130.  
  1131. .tubbz [class*='bi-battery']{
  1132. font-size:calc(var(--Sidebar-Top-Icons-Size) + 2px);
  1133. }
  1134.  
  1135. /*---- SIDEBAR VERTICAL TITLE ----*/
  1136. .hoez {
  1137. position:absolute;
  1138. top:50%;
  1139. right:0;
  1140. white-space:nowrap;
  1141. font-family:Dharko Gilbert;
  1142. font-size:var(--Sidebar-Vertical-Title-Size);
  1143. text-transform:uppercase;
  1144. letter-spacing:0.08em;
  1145. color:{color:sidebar title};
  1146. transform:rotate(-90deg) translateY(-50%);
  1147. transform-origin:center;
  1148. height:1em;
  1149. z-index:10;
  1150. }
  1151.  
  1152. .hoez[t-shad="yes"]{
  1153. text-shadow:-1px 2px 2.5px {color:sidebar title shadow};
  1154. }
  1155.  
  1156. .hoez[t-outline="yes"]{
  1157. text-shadow:.5px .5px 0px {color:sidebar title outline}, -.5px -.5px 0px {color:sidebar title outline}, .5px -.5px 0px {color:sidebar title outline}, -.5px .5px 0px {color:sidebar title outline};
  1158. }
  1159.  
  1160. .hoez[t-shad="yes"][t-outline="yes"]{
  1161. text-shadow:-1px 2px 2.5px {color:sidebar title shadow}, .5px .5px 0px {color:sidebar title outline}, -.5px -.5px 0px {color:sidebar title outline}, .5px -.5px 0px {color:sidebar title outline}, -.5px .5px 0px {color:sidebar title outline};
  1162. }
  1163.  
  1164. .hoez span {
  1165. display:block;
  1166. margin-top:50%;
  1167. padding-top:calc(var(--Sidebar-Vertical-Title-Size) / 2);
  1168. margin-left:var(--Sidebar-Frame-Indent);
  1169. -webkit-font-smoothing:antialiased;
  1170. }
  1171.  
  1172. /*---- SIDEBAR MUSIC PLAYER ----*/
  1173. /* sorry for the mess lmao */
  1174. .botstick, .bingbong {
  1175. position:absolute;
  1176. left:0;bottom:0;
  1177. width:100%;
  1178. border-radius:0 0 var(--Sidebar-Image-Roundness) var(--Sidebar-Image-Roundness);
  1179. height:calc(var(--MusicPlayer-Text-Size) + (var(--MusicPlayer-Padding) * 2));
  1180. padding-left:var(--MusicPlayer-Padding);
  1181. padding-right:calc(var(--Sidebar-Frame-Indent) + 1px);
  1182. background:{color:music player background};
  1183. box-sizing:border-box;
  1184. z-index:0;
  1185. }
  1186.  
  1187. .bingbong {
  1188. display:flex;
  1189. align-items:center;
  1190. justify-content:center;
  1191. background:transparent;
  1192. z-index:9; /* was 13 */
  1193. }
  1194.  
  1195. .bingbong:after {
  1196. content:"";
  1197. position:absolute;
  1198. top:0;
  1199. right:0;margin-right:calc(var(--Sidebar-Frame-Indent) + 1px);
  1200. width:var(--MusicPlayer-Padding);
  1201. height:100%;
  1202. background:{color:music player background};
  1203. }
  1204.  
  1205. .dingding {
  1206. position:relative;
  1207. font-family:Delius Unicase;
  1208. font-size:var(--MusicPlayer-Text-Size);
  1209. text-transform:uppercase;
  1210. letter-spacing:.7px;
  1211. color:{color:music player text};
  1212. line-height:1em;
  1213. white-space:nowrap;
  1214. overflow:hidden;
  1215. }
  1216.  
  1217. .dingding span, .bongfade {
  1218. transition:opacity var(--MusicPlayer-Text-Fade-Speed) ease-in-out;
  1219. }
  1220.  
  1221. .dingding span:not(:first-child){
  1222. display:none;
  1223. }
  1224.  
  1225. .bongfade {
  1226. opacity:0;
  1227. }
  1228.  
  1229. .markee {
  1230. position:relative;
  1231. overflow:hidden;
  1232. }
  1233.  
  1234. .marinah {
  1235. width:calc(100% + (var(--Sidebar-Frame-Indent) * 2));
  1236. height:100%;
  1237. transform:translateX(100%);
  1238. animation:scroll-left 10s linear infinite;
  1239. }
  1240.  
  1241. @keyframes scroll-left {
  1242. 0% {
  1243. transform: translateX(100%);
  1244. }
  1245. 100% {
  1246. transform: translateX(-100%);
  1247. }
  1248. }
  1249.  
  1250. .lvttvce {
  1251. position:absolute;
  1252. left:0;bottom:0;
  1253. margin-bottom:calc(var(--MusicPlayer-Text-Size) + (var(--MusicPlayer-Padding) * 2) + 10px);
  1254. width:100%;
  1255. z-index:13;
  1256. }
  1257.  
  1258. .peev {
  1259. position:absolute;
  1260. margin-left:calc(50% - (var(--MusicPlayer-Icon-Size) / 2) - var(--MusicPlayer-Icon-Padding) - var(--MusicPlayer-Icon-Size) - var(--MusicPlayer-Icon-Spacing) - 6px);
  1261. bottom:0;margin-bottom:calc(var(--MusicPlayer-Icon-Padding) - 6px);
  1262. font-size:var(--MusicPlayer-Icon-Size);
  1263. color:{color:music player controls B};
  1264. padding:6px;
  1265. z-index:9;
  1266. }
  1267.  
  1268. .neet {
  1269. position:absolute;
  1270. right:0;
  1271. margin-right:calc(50% - (var(--MusicPlayer-Icon-Size) / 2) - var(--MusicPlayer-Icon-Padding) - var(--MusicPlayer-Icon-Size) - var(--MusicPlayer-Icon-Spacing) - 6px);
  1272. bottom:0;margin-bottom:calc(var(--MusicPlayer-Icon-Padding) - 6px);
  1273. font-size:var(--MusicPlayer-Icon-Size);
  1274. color:{color:music player controls B};
  1275. padding:6px;
  1276. z-index:9;
  1277. }
  1278.  
  1279. .peev, .neet {
  1280. cursor:pointer!important;
  1281. }
  1282.  
  1283. .qorqle {
  1284. margin:auto;
  1285. width:calc(var(--MusicPlayer-Icon-Size) + (var(--MusicPlayer-Icon-Padding) * 2));
  1286. height:calc(var(--MusicPlayer-Icon-Size) + (var(--MusicPlayer-Icon-Padding) * 2));
  1287. border-radius:100%;
  1288. background:{color:music player circle};
  1289. display:flex;
  1290. align-items:center;
  1291. justify-content:center;
  1292. cursor:pointer;
  1293. z-index:10;
  1294. }
  1295.  
  1296. .qorqle i {
  1297. font-size:var(--MusicPlayer-Icon-Size);
  1298. color:{color:music player controls A};
  1299. line-height:0px;
  1300. }
  1301.  
  1302. .qorqle:active i {
  1303. font-size:calc(var(--MusicPlayer-Icon-Size) - 3px);
  1304. }
  1305.  
  1306. .vause {
  1307. display:none;
  1308. }
  1309.  
  1310. /*---- SIDEBAR NOTIF BLOCKS ----*/
  1311. .paindesk {
  1312. position:absolute;
  1313. top:0;
  1314. left:0;
  1315. width:var(--Sidebar-Width);
  1316.  
  1317. {block:ifnotshowmusicplayer}
  1318. height:100%;
  1319. {/block:ifnotshowmusicplayer}
  1320.  
  1321. {block:ifshowmusicplayer}
  1322. height:calc(100% - var(--MusicPlayer-Text-Size) - (var(--MusicPlayer-Padding) * 2));
  1323. {/block:ifshowmusicplayer}
  1324. display:table;
  1325. opacity:calc(1 - {select:notif panel transparency});
  1326. z-index:12;
  1327. transition:opacity 0.420s ease-in-out; /* mouse leave */
  1328. }
  1329.  
  1330. .paindesk:hover {
  1331. opacity:1;
  1332. transition:opacity 0.25s ease-in-out; /* mouse enter */
  1333. }
  1334.  
  1335. .muchpain {
  1336. display:table-cell;
  1337. vertical-align:middle;
  1338. }
  1339.  
  1340. .chellfish {
  1341. {block:ifnotsidebarverticaltitle}
  1342. margin-left:calc((var(--Sidebar-Width) - (var(--Sidebar-Width) * var(--Sidebar-Desc-Width-INT))) / 2);
  1343. {/block:ifnotsidebarverticaltitle}
  1344.  
  1345. {block:ifsidebarverticaltitle}
  1346. margin-left:calc(((var(--Sidebar-Width) - (var(--Sidebar-Width) * var(--Sidebar-Desc-Width-INT))) / 2) - 7px);
  1347. {/block:ifsidebarverticaltitle}
  1348.  
  1349. margin-top:10px;
  1350. width:calc(var(--Sidebar-Width) * var(--Sidebar-Desc-Width-INT));
  1351. box-sizing:border-box;
  1352. backface-visibility:hidden;
  1353. overflow:hidden;
  1354. }
  1355.  
  1356. .notif-wrap {
  1357. transition:transform 0.25s ease-in-out;
  1358. }
  1359.  
  1360. .notif-wrap:hover {
  1361. transform:scale(1.069);
  1362. transform-origin:center;
  1363. }
  1364.  
  1365. .notif-wrap + .notif-wrap {
  1366. margin-top:var(--Sidebar-Notif-Row-Spacing);
  1367. }
  1368.  
  1369. .notif-block {
  1370. width:100%;
  1371. padding:var(--Sidebar-Notif-Padding);
  1372. background:rgba({RGBcolor:notif background},calc(1 - {select:notif transparency}));
  1373. box-sizing:border-box;
  1374. border-radius:var(--Sidebar-Notif-Corner-Roundness);
  1375. display:flex;
  1376. align-items:center;
  1377. transition:background-color 0.25s ease-in-out;
  1378. }
  1379.  
  1380. .notif-block:hover {
  1381. background:rgba({RGBcolor:notif background},1);
  1382. }
  1383.  
  1384. .calicow {
  1385. transition:opacity var(--Sidebar-Notif-Dismiss-Speed) ease-in-out;
  1386. }
  1387.  
  1388. .calicow {
  1389. opacity:0;
  1390. }
  1391.  
  1392. .avowrap {
  1393. position:relative;
  1394. width:var(--Sidebar-Avatar-Size);
  1395. height:var(--Sidebar-Avatar-Size);
  1396. border-radius:100%;
  1397. background-size:cover;
  1398. background-position:center;
  1399. flex-shrink:0;
  1400. }
  1401.  
  1402. .mini-avi {
  1403. position:absolute;
  1404. top:0;left:0;
  1405. width:var(--Sidebar-Avatar-Size);
  1406. height:var(--Sidebar-Avatar-Size);
  1407. border-radius:100%;
  1408. opacity:0;
  1409. z-index:2;
  1410. }
  1411.  
  1412. .avowrap + .notif-text {
  1413. margin-left:9px;
  1414. }
  1415.  
  1416. .notif-text {
  1417. font-size:var(--SmallCaps-Font-Size);
  1418. cursor:default;
  1419. }
  1420.  
  1421. .notif-text [top]{
  1422. font-family:delius unicase;
  1423. font-size:calc(var(--SmallCaps-Font-Size) - 1.5px);
  1424. letter-spacing:.5px;
  1425. color:{color:sidebar notif text A};
  1426. }
  1427.  
  1428. .notif-text .iconsax {
  1429. margin-right:4px;
  1430. --Iconsax-Size:calc(var(--SmallCaps-Font-Size) + 3px);
  1431. --Iconsax-Color:{color:sidebar notif icon};
  1432. }
  1433.  
  1434. .notif-text [top] + [bot]{
  1435. margin-top:4px;
  1436. }
  1437.  
  1438. .notif-text [bot]{
  1439. display:flex;
  1440. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  1441. text-transform:uppercase;
  1442. letter-spacing:.7px;
  1443. color:{color:sidebar notif text B};
  1444. }
  1445.  
  1446. .notif-text [bot] span {
  1447. display:block;
  1448. }
  1449.  
  1450. /*---- CUSTOM LINKS ----*/
  1451. .ceels {
  1452. margin-top:calc(var(--Sidebar-Frame-Indent) + 12px);
  1453. width:100%;
  1454. }
  1455.  
  1456. .pengweng {
  1457. margin:calc(var(--CustomLinks-Spacing) / -2);
  1458. margin-bottom:calc(0px - var(--CustomLinks-Spacing));
  1459. margin-right:0;
  1460. width:calc(100% + var(--CustomLinks-Spacing));
  1461. display:flex;
  1462. align-items:center;
  1463. justify-content:center;
  1464. flex-wrap:wrap;
  1465. }
  1466.  
  1467. .ceels a {
  1468. margin:calc(var(--CustomLinks-Spacing) / 2);
  1469. display:flex;
  1470. align-items:center;
  1471. justify-content:center;
  1472. width:calc((100% - (var(--CustomLinks-Spacing) * var(--CustomLinks-Per-Row))) / var(--CustomLinks-Per-Row));
  1473. padding:var(--CustomLinks-Padding) calc(var(--CustomLinks-Padding) * 0.8);
  1474.  
  1475. box-sizing:border-box;
  1476. background:{color:customlinks background};
  1477. border-radius:2px;
  1478. font-family:var(--SmallCaps-Font-Family);
  1479. font-size:var(--CustomLinks-Font-Size);
  1480. text-transform:uppercase;
  1481. letter-spacing:1.3px;
  1482. color:{color:customlinks text};
  1483. line-height:calc(var(--CustomLinks-Font-Size) * 1.4);
  1484. text-align:center;
  1485. flex-shrink:0;
  1486. overflow:hidden;
  1487. transition:all 0.25s ease-in-out;
  1488. }
  1489.  
  1490. .ceels span {
  1491. display:block;
  1492. margin-bottom:calc(var(--SmallCaps-Font-Size) * -0.4);
  1493. }
  1494.  
  1495. .ceels a:hover {
  1496. background:{color:customlinks hover bg};
  1497. color:{color:customlinks hover text};
  1498. }
  1499.  
  1500. /*---- AVATAR ICON + DESCRIPTION ----*/
  1501. /* the 'header' thing above the posts */
  1502. .xtoptop {
  1503. position:relative;
  1504. display:flex;
  1505. align-items:center;
  1506. margin-bottom:var(--Post-Spacing);
  1507. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  1508. }
  1509.  
  1510. .gdgdgd {
  1511. position:relative;
  1512. width:calc(var(--Header-Icon-Size) + (var(--Header-Icon-Padding) * 2));
  1513. height:calc(var(--Header-Icon-Size) + (var(--Header-Icon-Padding) * 2));
  1514. border:1px solid {color:header icon border A};
  1515. background:{color:header icon border B};
  1516. border-radius:var(--Header-Icon-Roundness);
  1517. flex-shrink:0;
  1518. }
  1519.  
  1520. /*-- round --*/
  1521. [ico-type="round"] .gdgdgd {
  1522. --Header-Icon-Roundness:100%;
  1523. }
  1524.  
  1525. [ico-type="round"] .gdgdgd:after {
  1526. top:0;margin-top:calc(var(--Header-Icon-Padding) + 1px);
  1527. left:0;margin-left:var(--Header-Icon-Padding);
  1528. border-radius:var(--Header-Icon-Roundness);
  1529. width:100%;
  1530. height:100%;
  1531. }
  1532.  
  1533. /*-- soft --*/
  1534. [ico-type="soft"] .gdgdgd {
  1535. --Header-Icon-Roundness:var(--Header-Icon-Padding);
  1536. }
  1537.  
  1538. [ico-type="soft"] .gdgdgd:after {
  1539. border-radius:0 0 0 var(--Header-Icon-Roundness);
  1540. }
  1541.  
  1542. /*-- square --*/
  1543. [ico-type="square"] .gdgdgd {
  1544. --Header-Icon-Roundness:0px;
  1545. }
  1546.  
  1547. [ico-type="square"] .gdgdgd:after {
  1548. border-radius:0 0 0 var(--Header-Icon-Roundness);
  1549. }
  1550.  
  1551. .gdgdgd:after {
  1552. content:"";
  1553. position:absolute;
  1554. top:100%;
  1555. left:0;margin-left:var(--Post-Shadow-Size);
  1556. width:100%;
  1557. height:calc(var(--Header-Icon-Padding) + 1px);
  1558. background:rgba({RGBcolor:post shadow},calc(1 - {select:post shadow transparency}));
  1559. z-index:-1;
  1560. }
  1561.  
  1562. .shadowimg, .gdgdgd img {
  1563. width:var(--Header-Icon-Size);
  1564. height:var(--Header-Icon-Size);
  1565. margin-top:var(--Header-Icon-Padding);
  1566. margin-left:var(--Header-Icon-Padding);
  1567. border-radius:var(--Header-Icon-Roundness);
  1568. }
  1569.  
  1570. .shadowimg {
  1571. background-position:center;
  1572. background-image:url('{image:header icon}');
  1573. background-size:cover;
  1574. }
  1575.  
  1576. .gdgdgd img {
  1577. position:absolute;
  1578. top:0;left:0;
  1579. opacity:0;
  1580. z-index:2;
  1581. }
  1582.  
  1583. .mooshroom {
  1584. flex:1;
  1585. margin-left:calc(0px - 1px - var(--Header-Icon-Padding) - (var(--Header-Icon-Size) / 2));
  1586. min-height:calc(var(--Header-Icon-Size) + (var(--Header-Icon-Padding) * 2) + 2px + (var(--Desc-Box-Padding) * 2));
  1587. box-sizing:border-box;
  1588. background:{color:post};
  1589. border:1px solid {color:post borders outer};
  1590. border-radius:var(--Posts-Corner-Roundness);
  1591. box-shadow:var(--Post-Shadow-Size) var(--Post-Shadow-Size) 0 rgba({RGBcolor:post shadow},calc(1 - {select:post shadow transparency}));
  1592. display:flex;
  1593. align-items:center;
  1594. }
  1595.  
  1596. .deskwrap {
  1597. margin-left:calc(1px + var(--Header-Icon-Padding) + (var(--Header-Icon-Size) / 2) + var(--Desc-Left-Gap));
  1598. padding:var(--Desc-Box-Padding);
  1599. padding-left:0;
  1600. display:flex;
  1601. align-items:center;
  1602. }
  1603.  
  1604. .desc {
  1605. line-height:var(--Line-Height);
  1606. }
  1607.  
  1608. /*---- POST CONTAINER ----*/
  1609. .postscont {
  1610. margin-top:var(--Post-Spacing);
  1611. margin-left:calc(var(--Sidebar-Width) + var(--Center-Aisle-Gaps));
  1612. }
  1613.  
  1614. .posts, .notescont {
  1615. position:relative;
  1616. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  1617. border:1px solid {color:post borders outer};
  1618. border-radius:var(--Posts-Corner-Roundness);
  1619. box-shadow:var(--Post-Shadow-Size) var(--Post-Shadow-Size) 0 rgba({RGBcolor:post shadow},calc(1 - {select:post shadow transparency}));
  1620. }
  1621.  
  1622. /*----------------------*/
  1623.  
  1624. .xtoptop + .posts, .posts:first-child, .posts + * {
  1625. margin-bottom:var(--Post-Spacing);
  1626. }
  1627.  
  1628. .posts:only-child {
  1629. {block:PermalinkPage}
  1630. margin-bottom:var(--Post-Spacing);
  1631. {/block:PermalinkPage}
  1632. }
  1633.  
  1634. .posts + *:not(.posts) {
  1635. margin-bottom:var(--Post-Spacing);
  1636. }
  1637.  
  1638. [black-and-white="rb-ico"] .reblog-head img {
  1639. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1640. filter:var(--Grayscale-Settings);
  1641. }
  1642.  
  1643. [black-and-white="everything"] img,
  1644. [black-and-white="everything"] iframe,
  1645. [black-and-white="everything"] video {
  1646. transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
  1647. filter:var(--Grayscale-Settings);
  1648. }
  1649.  
  1650. [black-and-white="everything"] .posts:hover img,
  1651. [black-and-white="everything"] .posts:hover iframe,
  1652. [black-and-white="everything"] .posts:hover video {
  1653. filter:none;
  1654. }
  1655.  
  1656. /*-----------------------*/
  1657. .permatop {
  1658. position:relative;
  1659. background:{color:top permalink background};
  1660. border-radius:var(--Posts-Corner-Roundness) var(--Posts-Corner-Roundness) 0 0;
  1661. box-sizing:border-box;
  1662. padding:var(--Post-Padding);
  1663.  
  1664. padding-top:calc(var(--Post-Padding) + 1px);
  1665. padding-bottom:calc(var(--Post-Padding) - 1px);
  1666.  
  1667. border-bottom:1px solid {color:top permalink border};
  1668.  
  1669. font-family:var(--SmallCaps-Font-Family);
  1670. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  1671. text-transform:uppercase;
  1672. letter-spacing:1.1px;
  1673. word-spacing:.5px;
  1674. line-height:1em;
  1675. }
  1676.  
  1677. .permatop .iconsax {
  1678. margin-top:-1px;
  1679. margin-right:8px;
  1680. --Iconsax-Size:calc(var(--Body-Font-Size) + 2px);
  1681. --Iconsax-Color:{color:top permalink text};
  1682. }
  1683.  
  1684. .pzt {
  1685. padding-top:calc((var(--SmallCaps-Font-Size) - .5px) * 0.3);
  1686. }
  1687.  
  1688. .permatop, .permatop a {
  1689. color:{color:top permalink text};
  1690. }
  1691.  
  1692. .permatop a:not(.meh-menu a) {
  1693. margin:calc(0px - var(--Post-Padding));
  1694. padding:var(--Post-Padding);
  1695. padding-right:calc(var(--Post-Padding) / 2);
  1696. }
  1697.  
  1698. .acorn {
  1699. position:absolute;
  1700. top:0;
  1701. margin:0!important;
  1702. padding-left:calc(var(--Post-Padding) / 2)!important;
  1703. padding-right:var(--Post-Padding)!important;
  1704. right:0;
  1705. height:100%;
  1706. display:flex;
  1707. align-items:center;
  1708. justify-content:center;
  1709. box-sizing:border-box;
  1710. cursor:help;
  1711. }
  1712.  
  1713. .acorn [class^="ph"]{
  1714. font-size:var(--Dots-Menu-Icon-Size);
  1715. color:{color:top permalink text};
  1716. }
  1717.  
  1718. .meh-menu {
  1719. position:absolute;
  1720. top:100%;
  1721. margin-top:13px;
  1722. right:0;margin-right:var(--Post-Padding);
  1723. backface-visibility:hidden;
  1724. z-index:4;
  1725. --Meh-Arrow-Size:var(--Dots-Menu-Icon-Size);
  1726. --deez:calc((var(--Meh-Arrow-Size) * 1.4142) / 2);
  1727. --moo:calc(var(--deez) * (0.414 / 2));
  1728. transition:margin-top var(--Post-Menu-Fade-Speed) 0s ease-in-out, opacity var(--Post-Menu-Fade-Speed) 0s ease-in-out, visibility 0s var(--Post-Menu-Fade-Speed) ease-in-out;
  1729. visibility:hidden;
  1730. opacity:0;
  1731. }
  1732.  
  1733. .swip {
  1734. margin-top:5px!important;
  1735. opacity:1!important;
  1736. visibility:visible!important;
  1737. }
  1738.  
  1739. .nvt + .meh-menu {
  1740. transition:margin-top var(--Post-Menu-Fade-Speed) 0s ease-in-out, opacity var(--Post-Menu-Fade-Speed) 0s ease-in-out, visibility 0s 0s ease-in-out;
  1741. }
  1742.  
  1743. .yepclique:hover {
  1744. color:{color:post menu text}!important;
  1745. }
  1746.  
  1747. .meh-arrow {
  1748. position:absolute;
  1749. top:0;
  1750. margin-right:calc(var(--moo) + 2px);
  1751. right:0;margin-top:var(--moo);
  1752. width:calc(var(--Meh-Arrow-Size) / 2);
  1753. height:calc(var(--Meh-Arrow-Size) / 2);
  1754. transform-origin:center;
  1755. transform:rotate(45deg);
  1756. background:white;
  1757. border-top:1px solid {color:post menu border};
  1758. border-left:1px solid {color:post menu border};
  1759. box-sizing:border-box;
  1760. }
  1761.  
  1762. .meh-main {
  1763. margin-top:calc(var(--deez) / 2);
  1764. margin-left:calc(50% - var(--deez));
  1765. width:100%;
  1766. width:fit-content; /* firefox only */
  1767. border-radius:var(--Post-Menu-Roundness);
  1768. border:1px solid {color:post menu border};
  1769. background:{color:post menu background};
  1770. box-sizing:border-box;
  1771. box-shadow:5px 5px 0 rgba({RGBcolor:post shadow},calc(1 - {select:post shadow transparency}));
  1772. }
  1773.  
  1774. .meh-main a {
  1775. display:block;
  1776. --bvu:calc((var(--SmallCaps-Font-Size) - 1px) * 0.3);
  1777. padding:calc(var(--Post-Menu-Padding) + 2px);
  1778.  
  1779. padding-top:calc(var(--bvu) + var(--Post-Menu-Padding) - 1px);
  1780. padding-bottom:calc(var(--Post-Menu-Padding) - var(--bvu) + 1px);
  1781.  
  1782. font-family:var(--SmallCaps-Font-Family);
  1783. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  1784. text-transform:uppercase;
  1785. letter-spacing:1.1px;
  1786. box-sizing:border-box;
  1787. color:{color:post menu text};
  1788. white-space:nowrap;
  1789. line-height:1em;
  1790. transition:color .3s ease-in-out;
  1791. }
  1792.  
  1793. .meh-main a:first-child {
  1794. margin-top:2px;
  1795. }
  1796.  
  1797. .meh-main a[data-clipboard-text]{
  1798. cursor:help;
  1799. }
  1800.  
  1801. .meh-main a:hover {
  1802. color:{color:post menu text hover};
  1803. }
  1804.  
  1805. /*-----------------------*/
  1806.  
  1807. .postinner, .notescont {
  1808. padding:var(--Post-Padding);
  1809. background:{color:post};
  1810. line-height:var(--Line-Height);
  1811. overflow:hidden;
  1812. }
  1813.  
  1814. .desc a, .postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .inari, .tagsdiv a, a.read_more){
  1815. padding-bottom:.5px;
  1816. border-bottom:1px solid rgba({RGBcolor:link},0.420);
  1817. }
  1818.  
  1819. /*---- REBLOG HEAD ----*/
  1820. .reblog-wrap {
  1821. margin:0 calc(0px - var(--Post-Padding));
  1822. padding:0 var(--Post-Padding);
  1823. }
  1824.  
  1825. .reblog-wrap + .reblog-wrap {
  1826. margin-top:var(--Reblogs-Spacing);
  1827. padding-top:var(--Reblogs-Spacing);
  1828. border-top:1px solid var(--Reblogs-Border);
  1829. }
  1830.  
  1831. .reblog-head {
  1832. display:flex;
  1833. align-items:center;
  1834. }
  1835.  
  1836. .reblog-head img {
  1837. width:var(--Reblogger-Avatar-Size);
  1838. height:var(--Reblogger-Avatar-Size);
  1839. border-radius:100%;
  1840. }
  1841.  
  1842. .reblog-head img + .reblog-url {
  1843. margin-left:var(--Reblogger-Avatar-Gap-Right);
  1844. }
  1845.  
  1846. .reblog-url, .reblog-url a, p > a.tumblr_blog[target='_blank'],
  1847. [customize-page='true'] .tumblr_blog,
  1848. .notescont .action a, .more_notes_link, .notes_loading {
  1849. font-family:var(--SmallCaps-Font-Family);
  1850. font-size:var(--SmallCaps-Font-Size);
  1851. text-transform:uppercase;
  1852. letter-spacing:1px;
  1853. color:var(--Reblogger-Username-Color);
  1854. line-height:1em;
  1855. }
  1856.  
  1857. .reblog-url, .reblog-url a {
  1858. padding-top:calc((var(--SmallCaps-Font-Size) + .3px) * 0.3);
  1859. font-size:calc(var(--SmallCaps-Font-Size) + .3px)!important;
  1860. }
  1861.  
  1862. .reblog-url .deac {
  1863. margin-left:3px;
  1864. color:var(--Body-Text-Color);
  1865. }
  1866.  
  1867. .reblog-head + .reblog-comment {
  1868. margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
  1869. }
  1870.  
  1871. /*---- NPF... STUFF ----*/
  1872. figure[data-orig-src] + figure[data-orig-src]{
  1873. margin-top:var(--Photoset-Spacing);
  1874. }
  1875.  
  1876. .tmblr-full video {
  1877. cursor:pointer;
  1878. }
  1879.  
  1880. video::-webkit-media-controls-panel {
  1881. position:absolute;
  1882. bottom:0;
  1883. background:transparent!important;
  1884. width:100%;
  1885. box-sizing:border-box;
  1886. opacity:1!important;
  1887. }
  1888.  
  1889. video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
  1890. display:none!important;
  1891. }
  1892.  
  1893. [customize-page="true"] .tmblr-full[data-npf*='video']{
  1894. max-height:540px;
  1895. }
  1896.  
  1897. * + .npf-link-block {
  1898. margin-top:10px;
  1899. }
  1900.  
  1901. .npf-link-block {
  1902. margin-top:0px;
  1903. margin-bottom:0;
  1904. border-color:{color:special border}!important;
  1905. border-radius:0!important;
  1906. }
  1907.  
  1908. .npf-link-block + * {
  1909. margin-bottom:var(--Paragraph-Margins);
  1910. }
  1911.  
  1912. .npf-link-block a {
  1913. padding:0!important;
  1914. border:none!important;
  1915. }
  1916.  
  1917. .npf-link-block .title {
  1918. font-family:delius unicase!important;
  1919. font-size:calc(var(--SmallCaps-Font-Size) + 2.5px)!important;
  1920. text-transform:uppercase;
  1921. letter-spacing:.5px;
  1922. color:{color:text}!important;
  1923. line-height:1.7em!important;
  1924. text-shadow:1px 1px 1px rgba(0,0,0,0.1);
  1925. }
  1926.  
  1927. .npf-link-block .bottom {
  1928. background:{color:special background}!important;
  1929. }
  1930.  
  1931. .npf-link-block .description {
  1932. font-family:delius unicase!important;
  1933. font-weight:bold;
  1934. font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
  1935. text-transform:uppercase;
  1936. letter-spacing:.5px;
  1937. color:{color:special text}!important;
  1938. line-height:1.7em!important;
  1939. }
  1940.  
  1941. .npf-link-block .site-name {
  1942. text-transform:initial!important;
  1943. font-family:var(--Body-Font-Family)!important;
  1944. font-weight:normal!important;
  1945. font-size:var(--Body-Font-Size)!important;
  1946. color:{color:special text}!important;
  1947. }
  1948.  
  1949. .npf-link-block .description + .site-name {
  1950. margin-top:0;
  1951. }
  1952.  
  1953. .npf-link-block.no-poster .title {
  1954. padding:0.8em!important;
  1955. text-shadow:none!important;
  1956. }
  1957.  
  1958. .npf-link-block.no-poster .title + .bottom {
  1959. border-top:1px solid {color:special border};
  1960. }
  1961.  
  1962. /* gif src attribution */
  1963. .tmblr-attribution {
  1964. font-family:var(--SmallCaps-Font-Family);
  1965. font-size:var(--SmallCaps-Font-Size);
  1966. text-transform:uppercase;
  1967. letter-spacing:1px;
  1968. }
  1969.  
  1970. /*---- TEXT POSTS (TITLE) ----*/
  1971. .post-title, .linkpost-title {
  1972. margin-top:2px;
  1973. margin-bottom:0;
  1974. padding:0.8em;
  1975. background:{color:special background};
  1976. border:1px solid {color:special border};
  1977. font-size:var(--Heading-Font-Size);
  1978. font-weight:normal;
  1979. color:{color:special text};
  1980. text-align:center;
  1981. }
  1982.  
  1983. .post-title + *, .linkpost-title + * {
  1984. margin-top:var(--Heading-Margins);
  1985. }
  1986.  
  1987. /*---- LINK POSTS (TITLE) ----*/
  1988. .linkpost-title {
  1989. display:flex;
  1990. align-items:center;
  1991. justify-content:space-between;
  1992. color:{color:special text};
  1993. text-align:left;
  1994. }
  1995.  
  1996. .linkpost-title span {
  1997. display:block;
  1998. max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
  1999. }
  2000.  
  2001. span + .linksym {
  2002. margin-left:10px;
  2003. margin-right:2px;
  2004. }
  2005.  
  2006. .linksym {
  2007. width:calc(var(--Heading-Font-Size) * 1.1);
  2008. height:calc(var(--Heading-Font-Size) * 1.1);
  2009. -webkit-mask-size:contain;
  2010. -webkit-mask-repeat:no-repeat;
  2011. -webkit-mask-position:center;
  2012. -webkit-mask-image:var(--ext);
  2013. background:{color:special text};
  2014. }
  2015.  
  2016. .linkpost-title + .link-excerpt {
  2017. margin-top:-1px;
  2018. }
  2019.  
  2020. .link-excerpt {
  2021. padding:0.8em calc(0.8em + 2px);
  2022. border:1px solid {color:post borders inner};
  2023. }
  2024.  
  2025. .link-excerpt + * {
  2026. margin-top:var(--Heading-Margins);
  2027. }
  2028.  
  2029. .le-host {
  2030. font-family:var(--SmallCaps-Font-Family);
  2031. font-size:var(--SmallCaps-Font-Size);
  2032. text-transform:uppercase;
  2033. letter-spacing:.7px;
  2034. }
  2035.  
  2036. /*---- PHOTO POSTS ----*/
  2037. a.single-photo {
  2038. cursor:pointer;
  2039. }
  2040.  
  2041. img.photopic {
  2042. width:100%;
  2043. }
  2044.  
  2045. [photoset-layout] {
  2046. grid-gap:var(--Photoset-Spacing);
  2047. }
  2048.  
  2049. [photoset-layout] div {
  2050. cursor:pointer;
  2051. backface-visibility:hidden;
  2052. }
  2053.  
  2054. .caption {
  2055. margin-top:var(--Captions-Gap);
  2056. }
  2057.  
  2058. /*----- LIGHTBOX BS -----*/
  2059. .tmblr-lightbox, #tumblr_lightbox {
  2060. background-color:rgba({RGBcolor:post},0.69)!important;
  2061. }
  2062.  
  2063. .tmblr-lightbox .vignette {
  2064. background-image:none!important;
  2065. }
  2066.  
  2067. #vignette {display:none!important}
  2068.  
  2069. .lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
  2070. margin-top:calc(0px - var(--Post-Padding));
  2071. }
  2072.  
  2073. .tmblr-lightbox img, #tumblr_lightbox img {
  2074. max-width:initial;
  2075. box-shadow:none!important;
  2076. border-radius:0px!important;
  2077. padding:var(--Post-Padding);
  2078. background:{color:post}!important;
  2079. border:1px solid {color:post borders outer}!important;
  2080. }
  2081.  
  2082. /*----- QUOTE POSTS -----*/
  2083. .postinner > .quote-words:first-child { margin-top:0 }
  2084.  
  2085. .quote-words, .npf_quote {
  2086. padding:0 var(--Post-Padding);
  2087. font-family:var(--Quote-Font-Family)!important;
  2088. font-size:var(--Quote-Font-Size)!important;
  2089. letter-spacing:.3px;
  2090. text-align:center;
  2091. line-height:200%;
  2092. }
  2093.  
  2094. .quote-words + .quote-source,
  2095. .npf_quote + p[style*="margin-bottom: 0px;"]{
  2096. margin-top:var(--Paragraph-Margins);
  2097. text-align:center;
  2098. }
  2099.  
  2100. /*----- VIDEO POSTS -----*/
  2101. .tmblr-video {
  2102. max-width:initial;
  2103. }
  2104.  
  2105. .tumblr_video_container, .tumblr_video_iframe {
  2106. width:100%!important;
  2107. }
  2108.  
  2109. /*---- CHAT POSTS ----*/
  2110. .chatwrap {
  2111. display:table;
  2112. width:100%;
  2113. border:1px solid var(--Post-Borders-Inner);
  2114. box-sizing:border-box;
  2115. }
  2116.  
  2117. .chat_row {
  2118. position:relative;
  2119. display:table-row;
  2120. overflow:hidden;
  2121. }
  2122.  
  2123. .chat_row:not(:has(.chat_label)){
  2124. display:block;
  2125. width:calc(var(--Post-Width) - 2px);
  2126. margin-right:calc(0px - var(--Post-Width) - 2px);
  2127. }
  2128.  
  2129. .chat_row:after {
  2130. content:"";
  2131. position:absolute;
  2132. bottom:0;left:0;
  2133. transform:translateY(-.5px);
  2134. width:100%;
  2135. height:1px;
  2136. background:var(--Post-Borders-Inner);
  2137. }
  2138.  
  2139. .chatwrap .chat_row:last-child:after {
  2140. display:none;
  2141. }
  2142.  
  2143. .chat_row code:only-child {
  2144. display:block;
  2145. padding:0.8em;
  2146. border:none;
  2147. background:transparent;
  2148. }
  2149.  
  2150. .chat_label {
  2151. display:table-cell;
  2152. white-space:nowrap;
  2153. padding-right:1em;
  2154. font-family:var(--SmallCaps-Font-Family);
  2155. font-size:var(--SmallCaps-Font-Size);
  2156. text-transform:uppercase;
  2157. letter-spacing:1px;
  2158. }
  2159.  
  2160. .chat_label, .chat_content {
  2161. padding:calc(1em - 2px) 1em;
  2162. }
  2163.  
  2164. .chat_content {
  2165. display:table-cell;
  2166. width:100%;
  2167. }
  2168.  
  2169. .chat_label + .chat_content {
  2170. border-left:1px solid var(--Post-Borders-Inner);
  2171. }
  2172.  
  2173. .chat_row .chat_label + .chat_content {
  2174. min-width:calc((var(--Post-Width) - 3px) / 2);
  2175. box-sizing:border-box;
  2176. }
  2177.  
  2178. /*---- AUDIO POSTS ----*/
  2179. .audio-post .npf_inst img {
  2180. width:100%;
  2181. }
  2182.  
  2183. .aud-emb {display:none}
  2184.  
  2185. .audiowrap {
  2186. display:flex;
  2187. align-items:center;
  2188. }
  2189.  
  2190. .albumwrap {
  2191. position:relative;
  2192. width:var(--Audio-Post-Album-Size);
  2193. height:var(--Audio-Post-Album-Size);
  2194. display:flex;
  2195. align-items:center;
  2196. justify-content:center;
  2197. }
  2198.  
  2199. .albumwrap[has-cover] .audplac {display:none}
  2200.  
  2201. .butts {
  2202. width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  2203. height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
  2204. background:var(--Audio-Post-Buttons-Background);
  2205. border-radius:100%;
  2206. display:flex;
  2207. align-items:center;
  2208. justify-content:center;
  2209. cursor:pointer;
  2210. z-index:2;
  2211. }
  2212.  
  2213. .overplay, .overpause {
  2214. width:var(--Audio-Post-Buttons-Size);
  2215. height:var(--Audio-Post-Buttons-Size);
  2216. -webkit-mask-size:contain;
  2217. -webkit-mask-repeat:no-repeat;
  2218. -webkit-mask-position:center;
  2219. background:var(--Audio-Post-Buttons-Color);
  2220. }
  2221.  
  2222. .overplay {
  2223. margin-left:2px;
  2224. -webkit-mask-image:var(--audioplay);
  2225. }
  2226.  
  2227. .overpause {
  2228. display:none;
  2229. -webkit-mask-image:var(--audiopause);
  2230. }
  2231.  
  2232. .ov-y {display:block}
  2233. .ov-z {display:none}
  2234.  
  2235. .audplac {
  2236. position:absolute;
  2237. top:0;left:0;
  2238. width:var(--Audio-Post-Album-Size);
  2239. height:var(--Audio-Post-Album-Size);
  2240. background:var(--Audio-Post-Buttons-Background);
  2241. }
  2242.  
  2243. .albumwrap img {
  2244. position:absolute;
  2245. top:0;left:0;
  2246. width:100%;
  2247. height:100%;
  2248. }
  2249.  
  2250. .audiotxt {
  2251. flex:1;
  2252. height:var(--Audio-Post-Album-Size);
  2253. padding:var(--Audio-Post-Album-Right-Gap);
  2254. background:{color:special background};
  2255. border:1px solid {color:special border};
  2256. display:flex;
  2257. align-items:center;
  2258. box-sizing:border-box;
  2259. display:flex;
  2260. align-items:center;
  2261. justify-content:space-between;
  2262. font-size:calc(var(--Body-Font-Size) - 1px);
  2263. line-height:var(--Line-Height);
  2264. color:{color:special text};
  2265. }
  2266.  
  2267. .odin > div + div, .npf-audio-details > * + * {
  2268. margin-top:calc((((var(--Body-Font-Size) - .3px) * var(--Line-Height-INT)) - (var(--Body-Font-Size) - .3px)) / -2);
  2269. padding-top:2px;
  2270. }
  2271.  
  2272. .aud-song-name, .npf-audio-title {
  2273. padding-top:calc((var(--SmallCaps-Font-Size) + 1px) * 0.3);
  2274. margin-bottom:calc((var(--SmallCaps-Font-Size) + 1px) * -0.7);
  2275. font-family:var(--SmallCaps-Font-Family);
  2276. font-size:calc(var(--SmallCaps-Font-Size) + 1px);
  2277. text-transform:uppercase;
  2278. letter-spacing:1px;
  2279. }
  2280.  
  2281. .aud-song-name[has-name] .untit {
  2282. display:none;
  2283. }
  2284.  
  2285. .aud-artist[has-artist] .unart {
  2286. display:none;
  2287. }
  2288.  
  2289. .inari {
  2290. display:block;
  2291. padding:6px;
  2292. margin-right:-6px;
  2293. cursor:pointer;
  2294. }
  2295.  
  2296. .int-all {
  2297. display:block;
  2298. width:calc(var(--Audio-Post-Buttons-Size) + 5px);
  2299. height:calc(var(--Audio-Post-Buttons-Size) + 5px);
  2300. -webkit-mask-size:contain;
  2301. -webkit-mask-repeat:no-repeat;
  2302. -webkit-mask-position:center;
  2303. -webkit-mask-image:var(--install);
  2304. background:{color:special text};
  2305. pointer-events:none;
  2306. }
  2307.  
  2308. /*---- SPOTIFY ----*/
  2309. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  2310. height:80px!important;
  2311. }
  2312.  
  2313. .spotify_audio_player {
  2314. width:100%;
  2315. }
  2316.  
  2317. /*---- SOUNDCLOUD ----*/
  2318. .tmblr-video iframe[src*='soundcloud.com']{
  2319. }
  2320.  
  2321. .audio-soundcloud {
  2322. max-height:113px;
  2323. border-radius:4px;
  2324. overflow:hidden;
  2325. }
  2326.  
  2327. .soundcloud_audio_player {
  2328. margin:-1px;
  2329. margin-bottom:0;
  2330. width:calc(100% + 2px);
  2331. max-width:initial;
  2332. }
  2333.  
  2334. /*---- ASK/ANSWER POSTS ----*/
  2335. .une_question {
  2336. display:flex;
  2337. }
  2338.  
  2339. .askpor {
  2340. flex-shrink:0;
  2341. width:var(--Asker-Avatar-Size);
  2342. height:var(--Asker-Avatar-Size);
  2343. padding:var(--Asker-Avatar-Padding);
  2344. border:1px solid {color:post borders inner};
  2345. border-radius:100%;
  2346. margin-right:11px;
  2347. }
  2348.  
  2349. .que-person {
  2350. margin-top:calc(var(--Asker-Avatar-Padding) + 1px);
  2351. margin-bottom:calc((var(--SmallCaps-Font-Size) - 1px) * -0.3);
  2352. line-height:1em;
  2353. }
  2354.  
  2355. .que-person .reblog-url {
  2356. position:relative;
  2357.  
  2358. /* 'asked' color */
  2359. color:{color:text};
  2360. }
  2361.  
  2362. .que-person .reblog-url b {
  2363. /* asker username color */
  2364. font-weight:normal;
  2365. color:var(--Reblogger-Username-Color);
  2366. }
  2367.  
  2368. .question_text {
  2369. margin-top:calc(var(--Reblogger-Avatar-Bottom-Gap) - 1px);
  2370. padding:calc(1em - 2px) 1em;
  2371. background:{color:special background};
  2372. border-radius:3px;
  2373. border:1px solid {color:special border};
  2374. color:{color:special text};
  2375. }
  2376.  
  2377. .question_text > p:first-child {
  2378. margin-top:0px;
  2379. }
  2380.  
  2381. .question_text > p:only-child {
  2382. margin-bottom:0;
  2383. }
  2384.  
  2385. .une_question + .une_reponse {
  2386. margin-top:var(--Reblogs-Spacing);
  2387. padding-top:var(--Reblogs-Spacing);
  2388. border-top:1px solid var(--Reblogs-Border);
  2389. }
  2390.  
  2391. .une_reponse .reblog-url {
  2392. /* 'answered' text color */
  2393. color:{color:text};
  2394. }
  2395.  
  2396. /*---- TAGS SECTION ----*/
  2397. .tagsdiv {
  2398. margin-top:var(--Captions-Gap);
  2399. }
  2400.  
  2401. .tagsdiv[clicktags="yes"] {
  2402. {block:IndexPage}
  2403. display:none;
  2404. opacity:0;
  2405. transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
  2406. {/block:IndexPage}
  2407. }
  2408.  
  2409. .tagsfade {
  2410. opacity:1!important;
  2411. }
  2412.  
  2413. .tagsin {
  2414. display:flex;
  2415. flex-wrap:wrap;
  2416. justify-content:flex-end;
  2417. margin:calc(0px - var(--Tags-Spacing));
  2418. /*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
  2419. margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
  2420. line-height:var(--Line-Height);
  2421. }
  2422.  
  2423. .tagsin a {
  2424. position:relative;
  2425. display:block;
  2426. margin:0 var(--Tags-Spacing);
  2427. font-family:var(--SmallCaps-Font-Family);
  2428. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  2429. text-transform:uppercase;
  2430. letter-spacing:1px;
  2431. color:{color:tags};
  2432. }
  2433.  
  2434. .tagsin a:before {
  2435. content:"#";
  2436. font-family:work sans;
  2437. font-weight:500;
  2438. margin-right:.5px;
  2439. }
  2440.  
  2441. /*---- PERMALINK BAR BOTTOM ----*/
  2442. .botperma {
  2443. display:flex;
  2444. align-items:center;
  2445. justify-content:space-between;
  2446. padding:calc(var(--Post-Padding) - 2px) var(--Post-Padding);
  2447. background:{color:bottom permalink background};
  2448. border-radius:0 0 var(--Posts-Corner-Roundness) var(--Posts-Corner-Roundness);
  2449. border-top:1px solid {color:bottom permalink border};
  2450. font-family:var(--SmallCaps-Font-Family);
  2451. font-size:calc(var(--SmallCaps-Font-Size) - .5px);
  2452. text-transform:uppercase;
  2453. }
  2454.  
  2455. .botperma, .botperma a {
  2456. color:{color:bottom permalink text};
  2457. }
  2458.  
  2459. .permaleft {
  2460. text-transform:uppercase;
  2461. letter-spacing:1px;
  2462. word-spacing:1px;
  2463. line-height:1em;
  2464. }
  2465.  
  2466. .permaleft a {
  2467. display:flex;
  2468. align-items:center;
  2469. margin:calc(0px - var(--Post-Padding)) 0;
  2470. /*padding:var(--Post-Padding) 0;*/
  2471.  
  2472. --blehh:calc((var(--SmallCaps-Font-Size) - .5px) * 0.3);
  2473.  
  2474. padding-top:calc(var(--blehh) + var(--Post-Padding));
  2475. padding-bottom:calc(var(--Post-Padding) - var(--blehh));
  2476. }
  2477.  
  2478. .permaleft a + a {
  2479. margin-left:var(--Permalink-Text-Spacing);
  2480. }
  2481.  
  2482. .permaleft [class^="ph"]{
  2483. font-size:calc(var(--Body-Font-Size) + 2px);
  2484. margin-right:7px;
  2485. }
  2486.  
  2487. .permaright {
  2488. display:flex;
  2489. align-items:center;
  2490. justify-content:center;
  2491. letter-spacing:1px;
  2492. }
  2493.  
  2494. .permaright a {
  2495. display:block;
  2496. position:relative;
  2497. {block:IndexPage}
  2498. width:var(--Post-Buttons-Size);
  2499. height:var(--Post-Buttons-Size);
  2500. {/block:IndexPage}
  2501. backface-visibility:hidden;
  2502. {block:PermalinkPage}
  2503. padding-top:calc((var(--SmallCaps-Font-Size) - .5px) * 0.3);
  2504. {/block:PermalinkPage}
  2505. }
  2506.  
  2507. .permaright .iconsax {
  2508. display:block;
  2509. --Iconsax-Size:var(--Post-Buttons-Size);
  2510. --Iconsax-Color:var(--Post-Buttons-Color);
  2511. backface-visibility:hidden;
  2512. }
  2513.  
  2514. .permaright .iconsax[icon-name='repeat']{
  2515. transform-origin:center;
  2516. transform:scaleX(1.1);
  2517. }
  2518.  
  2519. .permaright .cp {
  2520. padding-left:1px;
  2521. font-size:var(--Post-Buttons-Size);
  2522. color:var(--Post-Buttons-Color);
  2523. }
  2524.  
  2525. .permaright span {display:block}
  2526.  
  2527. .permaright a + a {
  2528. margin-left:var(--Post-Buttons-Spacing);
  2529. }
  2530.  
  2531. .permaright[clicktags="no"] .clicktags {
  2532. display:none;
  2533. }
  2534.  
  2535. .clicktags {
  2536. cursor:help;
  2537. }
  2538.  
  2539. .like_button {
  2540. position:absolute;
  2541. top:0;left:0;
  2542. width:100%;
  2543. height:100%;
  2544. z-index:2;
  2545. }
  2546.  
  2547. .like_button iframe {
  2548. width:100%;
  2549. height:100%;
  2550. vertical-align:initial;
  2551. opacity:0;
  2552. }
  2553.  
  2554. .like_button.liked + .cp-heart-o {
  2555. color:var(--Like-Button-Liked);
  2556. }
  2557.  
  2558. /*---- POST NOTES ----*/
  2559. .notescont {
  2560. margin-top:var(--Post-Spacing);
  2561. margin-bottom:var(--Post-Spacing);
  2562. width:calc(var(--Post-Width) + (var(--Post-Padding) * 0) + 2px);
  2563. }
  2564.  
  2565. .notescont h1 {
  2566. margin-top:5px;
  2567. margin-bottom:calc(var(--Heading-Margins) + 5px);
  2568. font-weight:normal;
  2569. letter-spacing:.3px;
  2570. text-align:center;
  2571. }
  2572.  
  2573. .notescont ol.notes {
  2574. padding:0;
  2575. margin:0;
  2576. }
  2577.  
  2578. .notescont li {
  2579. list-style-type:none;
  2580. padding:0!important;
  2581. }
  2582.  
  2583. .notescont li + li {
  2584. margin-top:var(--Notes-Row-Spacing);
  2585. }
  2586.  
  2587. .notescont li:before {
  2588. font-family:phosphor;
  2589. font-size:var(--Notes-Indicator-Size);
  2590. color:{color:text};
  2591. vertical-align:middle;
  2592. }
  2593.  
  2594. .notescont li.like:before {
  2595. content:"\f1ca";
  2596. }
  2597.  
  2598. .notescont li.reblog:before {
  2599. content:"\f2c3";
  2600. }
  2601.  
  2602. .notescont li.reply:before,
  2603. .notescont li.with_commentary:before {
  2604. content:"\f0db"!important;
  2605. }
  2606.  
  2607. .notescont .avatar_frame {
  2608. display:none;
  2609. }
  2610.  
  2611. .notescont .avatar_frame + .action {
  2612. margin-left:var(--Notes-Indicator-Gap-Right);
  2613. }
  2614.  
  2615. .notescont .action a {
  2616. color:var(--Reblogger-Username-Color);
  2617. }
  2618.  
  2619. .notescont blockquote {
  2620. margin-left:calc(var(--Notes-Indicator-Size) / 2);
  2621. padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
  2622. }
  2623.  
  2624. .more_notes_link_container {
  2625. margin-top:1em!important;
  2626. margin-bottom:calc(var(--Paragraph-Margins) / 2);
  2627. }
  2628.  
  2629. .more_notes_link, .notes_loading {
  2630. color:{color:link};
  2631. }
  2632.  
  2633. /*---- PAGINATION ----*/
  2634. .botpagi {
  2635. display:flex;
  2636. align-items:center;
  2637. justify-content:space-between;
  2638. width:calc(var(--Post-Width) + (var(--Post-Padding) * 2) + 2px);
  2639. margin-bottom:var(--Post-Spacing);
  2640. font-family:var(--SmallCaps-Font-Family);
  2641. font-size:calc(var(--SmallCaps-Font-Size) - 1px);
  2642. text-transform:uppercase;
  2643. letter-spacing:1.1px;
  2644. line-height:1em;
  2645. }
  2646.  
  2647. .botpagi a {
  2648. padding:0.69em;
  2649. margin:-0.69em;
  2650. color:var(--Pagination-Color)!important;
  2651. }
  2652.  
  2653. .botpagi span {
  2654. padding:0 4px;
  2655. padding-top:calc((var(--SmallCaps-Font-Size) - 1px) * 0.3);
  2656. }
  2657.  
  2658. .prev-svg {
  2659. width:calc(var(--Body-Font-Size) + 3px);
  2660. height:calc(var(--Body-Font-Size) + 3px);
  2661. -webkit-mask-image:var(--BackSVG);
  2662. -webkit-mask-repeat:no-repeat;
  2663. -webkit-mask-size:contain;
  2664. background:var(--Pagination-Color)
  2665. }
  2666.  
  2667. .next-svg {
  2668. width:calc(var(--Body-Font-Size) + 3px);
  2669. height:calc(var(--Body-Font-Size) + 3px);
  2670. -webkit-mask-image:var(--NextSVG);
  2671. -webkit-mask-repeat:no-repeat;
  2672. -webkit-mask-size:contain;
  2673. background:var(--Pagination-Color)
  2674. }
  2675.  
  2676. .tsugi {
  2677. margin-right:calc(0px - var(--Post-Shadow-Size) - 0.69em)!important;
  2678. }
  2679.  
  2680. .pn {
  2681. margin-left:auto!important;
  2682. }
  2683.  
  2684. /*---ignore this---*/
  2685. .musubi {
  2686. position:fixed;
  2687. bottom:0;left:0;
  2688. width:100%;
  2689. box-sizing:border-box;
  2690. padding:14px;
  2691. background:#121212;
  2692. font-family:delius unicase;
  2693. font-weight:700;
  2694. font-size:11.5px;
  2695. text-transform:uppercase;
  2696. color:#d5d5d5;
  2697. letter-spacing:.5px;
  2698. word-spacing:1px;
  2699. line-height:1em;
  2700. text-align:center;
  2701. display:none;
  2702. z-index:11;
  2703. }
  2704.  
  2705. .musubi a {
  2706. margin-right:1px;
  2707. font-weight:bold;
  2708. color:#b2d66b;
  2709. }
  2710.  
  2711. /*-------------------*/
  2712.  
  2713. [credit-pos="bot"] .tubbz a[href*='glenthemes.tumblr.com']{
  2714. display:none;
  2715. }
  2716.  
  2717. [credit-pos="in-sb"] .lah-nuit {
  2718. display:none;
  2719. }
  2720.  
  2721. .lah-nuit {
  2722. display:block;
  2723. position:fixed;
  2724. bottom:0;margin-bottom:10px;
  2725. right:0;margin-right:8px;
  2726. padding:8px 5px 5px 5px;
  2727. font-family:var(--SmallCaps-Font-Family);
  2728. font-size:8px;
  2729. text-transform:uppercase;
  2730. letter-spacing:1.3px;
  2731. color:{color:text};
  2732. line-height:1em;
  2733. z-index:10;
  2734. }
  2735.  
  2736. .posts[id="669645454703722496"] .photoset-grid {
  2737. filter:brightness(103%) contrast(102%)
  2738. }
  2739.  
  2740. {CustomCSS}
  2741. </style>
  2742.  
  2743. </head>
  2744.  
  2745. <!--------------------->
  2746.  
  2747. <body>
  2748.  
  2749. <div class="musubi"></div>
  2750.  
  2751. <div class="mynoots">
  2752. <div class="nymoots">
  2753. <div class="ensoot">
  2754.  
  2755. <!---- LEFT SIDEBAR ---->
  2756. <div class="left-sb">
  2757. <div class="lbs">
  2758. <div class="el-present">
  2759. <div class="moolait" {block:ifsidebarhovernotifs}sb-hov-yes{/block:ifsidebarhovernotifs}>
  2760. <img class="main-sb-img" src="{image:sidebar image}">
  2761. </div>
  2762. <div class="hoez" t-shad="{select:sidebar title shadow}" t-outline="{select:sidebar title outline}">
  2763. {block:ifsidebarverticaltitle}
  2764. <span>{text:sidebar vertical title}</span>
  2765. {/block:ifsidebarverticaltitle}
  2766. </div>
  2767.  
  2768. <!------ MUSIC PLAYER ------>
  2769. {block:ifshowmusicplayer}
  2770. <div class="botstick"></div>
  2771.  
  2772. <div class="bingbong">
  2773. <div class="dingding">
  2774. <span>{text:music song 1 name}</span>
  2775. <span>{text:music song 2 name}</span>
  2776. <span>{text:music song 3 name}</span>
  2777. </div>
  2778. </div>
  2779.  
  2780. <div class="lvttvce">
  2781. <a class="ph-skip-back peev"></a>
  2782.  
  2783. <div class="qorqle">
  2784. <i class="ph-play vlay"></i>
  2785. <i class="ph-pause vause"></i>
  2786. </div>
  2787.  
  2788. <a class="ph-skip-forward neet"></a>
  2789. </div>
  2790.  
  2791. <div class="audiostaque">
  2792. <audio src="{text:music song 1 mp3}" vol="{text:music song 1 volume}"></audio>
  2793. <audio src="{text:music song 2 mp3}" vol="{text:music song 2 volume}"></audio>
  2794. <audio src="{text:music song 3 mp3}" vol="{text:music song 3 volume}"></audio>
  2795. </div><!--do not remove this </div> line-->
  2796.  
  2797. {/block:ifshowmusicplayer}
  2798. <!--end musicplayer-->
  2799.  
  2800.  
  2801. <!------ SIDEBAR TOP ROW ------>
  2802. <div class="martiny">
  2803. <div class="bubun">
  2804. <span>{text:sidebar corner title}</span>
  2805. </div>
  2806.  
  2807. <div class="tubbz">
  2808.  
  2809. <a href="//{Name}.tumblr.com" title="home">
  2810. <i class="bi bi-house-door"></i>
  2811. </a>
  2812.  
  2813.  
  2814. <a href="//{Name}.tumblr.com/ask" title="askbox">
  2815. <i class="bi bi-envelope"></i>
  2816. </a>
  2817.  
  2818.  
  2819. <a href="//{Name}.tumblr.com/archive" title="archive">
  2820. <i class="bi bi-grid"></i>
  2821. </a>
  2822.  
  2823. <!-- pls do not remove the credit! -->
  2824. <a href="//glenthemes.tumblr.com" title="theme by glenthemes">
  2825. <i class="bi bi-code-slash"></i>
  2826. </a>
  2827.  
  2828. <i class="bi bi-battery{select:battery status}"></i>
  2829. </div><!--tubbz-->
  2830. </div><!--martiny-->
  2831.  
  2832.  
  2833. <!------ "NOTIF" BLOCKS SECTION ------>
  2834. <div class="paindesk">
  2835. <div class="muchpain">
  2836. <div class="chellfish">
  2837. {text:sidebar hover notifs}
  2838. </div><!--chellfish-->
  2839. </div><!--muchpain-->
  2840. </div><!--paindesk-->
  2841. </div><!--el-present-->
  2842.  
  2843. <!------ CUSTOM LINKS ------>
  2844. <div class="ceels">
  2845. <div class="pengweng">
  2846. {block:ifcustomlink1name}
  2847. <a href="{text:customlink 1 url}">
  2848. <span>{text:customlink 1 name}</span>
  2849. </a>
  2850. {/block:ifcustomlink1name}
  2851.  
  2852. {block:ifcustomlink2name}
  2853. <a href="{text:customlink 2 url}">
  2854. <span>{text:customlink 2 name}</span>
  2855. </a>
  2856. {/block:ifcustomlink2name}
  2857.  
  2858. {block:ifcustomlink3name}
  2859. <a href="{text:customlink 3 url}">
  2860. <span>{text:customlink 3 name}</span>
  2861. </a>
  2862. {/block:ifcustomlink3name}
  2863.  
  2864. {block:ifcustomlink4name}
  2865. <a href="{text:customlink 4 url}">
  2866. <span>{text:customlink 4 name}</span>
  2867. </a>
  2868. {/block:ifcustomlink4name}
  2869.  
  2870. {block:ifcustomlink5name}
  2871. <a href="{text:customlink 5 url}">
  2872. <span>{text:customlink 5 name}</span>
  2873. </a>
  2874. {/block:ifcustomlink5name}
  2875.  
  2876. {block:ifcustomlink6name}
  2877. <a href="{text:customlink 6 url}">
  2878. <span>{text:customlink 6 name}</span>
  2879. </a>
  2880. {/block:ifcustomlink6name}
  2881.  
  2882. {block:ifcustomlink7name}
  2883. <a href="{text:customlink 7 url}">
  2884. <span>{text:customlink 7 name}</span>
  2885. </a>
  2886. {/block:ifcustomlink7name}
  2887.  
  2888. {block:ifcustomlink8name}
  2889. <a href="{text:customlink 8 url}">
  2890. <span>{text:customlink 8 name}</span>
  2891. </a>
  2892. {/block:ifcustomlink8name}
  2893. </div>
  2894. </div>
  2895. </div><!--lbs-->
  2896. </div><!--left-sb-->
  2897.  
  2898.  
  2899.  
  2900. <!---- RIGHTSIDE CONTAINER ---->
  2901. <div class="postscont" black-and-white="{select:grayscale images}">
  2902.  
  2903.  
  2904. <!---- AVATAR ICON + DESCRIPTION ---->
  2905. <!-- the 'header' thing above the posts -->
  2906. <div class="xtoptop" ico-type="{select:header icon type}">
  2907. <div class="gdgdgd">
  2908. <div class="shadowimg"></div>
  2909. <img src="{image:header icon}">
  2910. </div>
  2911.  
  2912. <div class="mooshroom">
  2913. <div class="deskwrap">
  2914. <div class="desc">
  2915. {block:ifdescription}
  2916. {text:Description}
  2917. {/block:ifdescription}
  2918.  
  2919. {block:ifnotdescription}
  2920. {Description}
  2921. {/block:ifnotdescription}
  2922. </div>
  2923. </div>
  2924. </div>
  2925. </div><!--xtoptop-->
  2926.  
  2927.  
  2928. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2929. <div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}">
  2930.  
  2931. <!------ TOP PERMALINK ------>
  2932. <div class="permatop" flex>
  2933. <a flex {block:IndexPage}href="{Permalink}" title="view post"{/block:IndexPage}>
  2934. {block:Text}
  2935. <i class="iconsax" icon-name="letter-case"></i>
  2936. {/block:Text}
  2937.  
  2938. {block:Photo}
  2939. <i class="iconsax" icon-name="picture"></i>
  2940. {/block:Photo}
  2941.  
  2942. {block:Photoset}
  2943. <i class="iconsax" icon-name="picture"></i>
  2944. {/block:Photoset}
  2945.  
  2946. {block:Quote}
  2947. <i class="iconsax" icon-name="quote-start"></i>
  2948. {/block:Quote}
  2949.  
  2950. {block:Link}
  2951. <i class="iconsax" icon-name="globe"></i>
  2952. {/block:Link}
  2953.  
  2954. {block:Chat}
  2955. <i class="iconsax" icon-name="messages-1"></i>
  2956. {/block:Chat}
  2957.  
  2958. {block:Audio}
  2959. <i class="iconsax" icon-name="music"></i>
  2960. {/block:Audio}
  2961.  
  2962. {block:Video}
  2963. <i class="iconsax" icon-name="video-2"></i>
  2964. {/block:Video}
  2965.  
  2966. {block:Answer}
  2967. <i class="iconsax" icon-name="mail"></i>
  2968. {/block:Answer}
  2969.  
  2970. <!------------------>
  2971.  
  2972. <span class="pzt">
  2973. {block:RebloggedFrom}Reblogged on{/block:RebloggedFrom}
  2974. {block:NotReblog}Posted on{block:NotReblog}
  2975.  
  2976. {Month} {DayOfMonthWithSuffix} {Year}&#8194;&#8201;&#9472;&#8201;&#8194;{TimeAgo}
  2977. </span>
  2978. </a>
  2979.  
  2980. <a class="acorn">
  2981. <i class="ph-dots-three"></i>
  2982. </a>
  2983.  
  2984. <div class="meh-menu">
  2985. <div class="meh-arrow"></div>
  2986.  
  2987. <div class="meh-main">
  2988. <a item data-clipboard-text="{Permalink}">copy link</a>
  2989. {block:RebloggedFrom}
  2990. <a item href="{ReblogParentURL}">via:&#8201;{ReblogParentName}</a>
  2991. <a item href="{ReblogRootURL}">src:&#8201;{ReblogRootName}</a>
  2992. {/block:RebloggedFrom}
  2993. </div>
  2994. </div>
  2995. </div><!--permatop-->
  2996.  
  2997. <div class="postinner">
  2998.  
  2999. <!------ POST TITLE ------>
  3000. {block:Title}
  3001. <h1 class="post-title">{Title}</h1>
  3002. {/block:Title}
  3003.  
  3004. <!------ TEXT POSTS ------>
  3005. {block:Text}
  3006. {block:NotReblog}{Body}{/block:NotReblog}
  3007. {block:RebloggedFrom}
  3008. {block:Reblogs}
  3009. <div class="reblog-wrap">
  3010. <div class="reblog-head source-head">
  3011. <img src="{PortraitURL-64}">
  3012. <span class="reblog-url">
  3013. <a href="{Permalink}">{Username}</a>
  3014. </span>
  3015. </div>
  3016. <div class="reblog-comment">{Body}</div>
  3017. </div>
  3018. {/block:Reblogs}
  3019. {/block:RebloggedFrom}
  3020. {/block:Text}
  3021.  
  3022. <!------ SINGLE PHOTO ------>
  3023. {block:Photo}
  3024. <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>
  3025. {/block:Photo}
  3026.  
  3027. <!------ PHOTOSETS ------>
  3028. {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}
  3029.  
  3030. <!------ QUOTE POSTS ------>
  3031. {block:Quote}
  3032. <div class="quote-words">{Quote}</div>
  3033. {block:Source}
  3034. <div class="quote-source">
  3035. <span mdash>&mdash;</span>
  3036. {Source}
  3037. </div>{/block:Source}
  3038. {/block:Quote}
  3039.  
  3040. <!------ LINK POSTS ------>
  3041. {block:Link}
  3042. <a class="linkpost-title" href="{URL}" {Target}>
  3043. <span>{Name}</span>
  3044. <div class="linksym"></div>
  3045. </a>
  3046.  
  3047. {block:Excerpt}
  3048. <div class="link-excerpt">
  3049. {Excerpt}
  3050. {block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
  3051. </div>
  3052. {/block:Excerpt}
  3053.  
  3054. {block:Description}
  3055. <div class="link-description">
  3056. {block:NotReblog}{Description}{/block:NotReblog}
  3057. {block:RebloggedFrom}
  3058. {block:Reblogs}
  3059. <div class="reblog-wrap">
  3060. <div class="reblog-head">
  3061. <img src="{PortraitURL-64}">
  3062. <span class="reblog-url">
  3063. <a href="{Permalink}">{Username}</a>
  3064. </span>
  3065. </div>
  3066. <div class="reblog-comment">{Body}</div>
  3067. </div>
  3068. {/block:Reblogs}
  3069. {/block:RebloggedFrom}
  3070. </div>
  3071. {/block:Description}
  3072. {/block:Link}
  3073.  
  3074. <!------ CHAT POSTS ------>
  3075. {block:Chat}
  3076. <div class="chatwrap">
  3077. {block:Lines}
  3078. <div class="chat_row">
  3079. {block:Label}
  3080. <div class="chat_label">{Label}</div>
  3081. {/block:Label}
  3082.  
  3083. <div class="chat_content">
  3084. {Line}
  3085. </div>
  3086. </div>
  3087. {/block:Lines}
  3088. </div>
  3089. {/block:Chat}
  3090.  
  3091. <!------ AUDIO POSTS ------>
  3092. {block:Audio}
  3093. <div class="audiowrap">
  3094. {block:AudioPlayer}
  3095. <div class="aud-emb">
  3096. {AudioPlayer}
  3097. </div>
  3098. {/block:AudioPlayer}
  3099.  
  3100. <div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
  3101. {block:AlbumArt}
  3102. <img src="{AlbumArtURL}">
  3103. {/block:AlbumArt}
  3104.  
  3105. <div class="audplac"></div>
  3106.  
  3107. <div class="butts">
  3108. <div class="overplay"></div>
  3109. <div class="overpause"></div>
  3110. </div>
  3111. </div>
  3112.  
  3113. <div class="audiotxt">
  3114. <div class="odin">
  3115.  
  3116. <div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
  3117. <div class="untit">Untitled track</div>
  3118.  
  3119. {block:TrackName}
  3120. <div class="hastit">{TrackName}</div>
  3121. {/block:TrackName}
  3122. </div>
  3123.  
  3124. {block:Album}
  3125. <div class="aud-album-name">{Album}</div>
  3126. {/block:Album}
  3127.  
  3128. <div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
  3129. <div class="unart">Unknown artist</div>
  3130.  
  3131. {block:Artist}
  3132. <div class="hasart">{Artist}</div>
  3133. {/block:Artist}
  3134. </div>
  3135. </div><!--odin-->
  3136.  
  3137. <a class="inari" title="download" target="_blank">
  3138. <span class="int-all"></span>
  3139. </a>
  3140. </div><!--audiotxt-->
  3141. </div><!--audiowrap-->
  3142. {/block:Audio}
  3143.  
  3144. <!------ VIDEO POSTS ------>
  3145. {block:Video}
  3146. <div class="tmblr-video">{Video-500}</div>
  3147. {/block:Video}
  3148.  
  3149. <!------ ANSWER POSTS ------>
  3150. {block:Answer}
  3151. <!-- who asked? -->
  3152. <div class="une_question">
  3153. <img class="askpor yoozah" src="{AskerPortraitURL-128}">
  3154.  
  3155. <div>
  3156. <div class="que-person">
  3157. <span class="reblog-url"><b>{Asker}</b> asked:</span>
  3158. </div>
  3159.  
  3160. <div class="question_text">{Question}</div>
  3161.  
  3162.  
  3163. </div>
  3164. </div><!--une_question-->
  3165.  
  3166. <!--------------------------------------->
  3167.  
  3168. <!-- who answered? -->
  3169. {block:Answerer}
  3170. <div class="reblog-wrap une_reponse">
  3171. <div class="answerer reblog-head">
  3172. <img src="{AnswererPortraitURL-64}">
  3173. <span class="reblog-url">{Answerer} answered:</span>
  3174. </div>
  3175. <p class="answer_text">{Answer}</p>
  3176. </div>
  3177.  
  3178. <!-- additional reblogs to the ask post -->
  3179. {block:Reblogs}
  3180. <div class="reblog-wrap reply_container">
  3181. <div class="replier reblog-head">
  3182. <img src="{PortraitURL-64}">
  3183. <span class="reblog-url">
  3184. <a href="{Permalink}">{Username}</a>
  3185. </span>
  3186. </div>
  3187. <div class="reply">{Body}</div>
  3188. </div>
  3189. {/block:Reblogs}
  3190. {/block:Answerer}
  3191.  
  3192. <!--------------------------------------->
  3193.  
  3194. <!-- original answer post -->
  3195. {block:NotReblog}
  3196. <div class="reblog-wrap une_reponse">
  3197. <div class="answerer reblog-head">
  3198. <img src="{PortraitURL-64}">
  3199. <span class="reblog-url">
  3200. <a href="{Permalink}">{Name}</a>
  3201. </span>
  3202. </div>
  3203.  
  3204. <div class="answer_text">{Answer}</div>
  3205. </div><!--answer-container-->
  3206. {/block:NotReblog}
  3207. {/block:Answer}
  3208. <!------ END ANSWER ------>
  3209.  
  3210. <!------ 'CAPTION'? ------>
  3211. {block:Caption}
  3212. <div class="caption">
  3213. {block:NotReblog}{Caption}{/block:NotReblog}
  3214. {block:RebloggedFrom}
  3215. {block:Reblogs}
  3216. <div class="reblog-wrap">
  3217. <div class="reblog-head">
  3218. <img src="{PortraitURL-64}">
  3219. <span class="reblog-url">
  3220. <a href="{Permalink}">{Username}</a>
  3221. </span>
  3222. </div><!--reblog-head-->
  3223. <div class="reblog-comment">{Body}</div>
  3224. </div><!--comment-container-->
  3225. {/block:Reblogs}
  3226. {/block:RebloggedFrom}
  3227. </div><!--caption-->
  3228. {/block:Caption}
  3229.  
  3230.  
  3231. <!------ TAGS ------>
  3232. {block:HasTags}
  3233. <div class="tagsdiv" clicktags="{select:click tags}">
  3234. <div class="tagsin">
  3235. {block:Tags}
  3236. <a href="{TagURL}">{Tag}</a>
  3237. {/block:Tags}
  3238. </div>
  3239. </div>
  3240. {/block:HasTags}
  3241. </div><!--postinner-->
  3242.  
  3243. <!------ BOTTOM PERMALINK ------>
  3244. {block:Date}
  3245. <div class="botperma">
  3246. <div class="permaleft" flex>
  3247. <i class="ph-{text:bottom permalink icon}"></i>
  3248.  
  3249. {block:RebloggedFrom}
  3250. <a href="{ReblogRootURL}" title="go to original poster">Source:&ensp;<span src-link>{ReblogRootName}</span></a>
  3251. {/block:RebloggedFrom}
  3252.  
  3253. {block:NotReblog}
  3254. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>Original Post</a>
  3255. {/block:NotReblog}
  3256.  
  3257. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{NoteCountWithLabel}</a>
  3258.  
  3259. <a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{DayOfWeek}</a>
  3260.  
  3261. {block:IndexPage}
  3262. {block:PinnedPostLabel}<a>Pinned Post</a>{/block:PinnedPostLabel}
  3263. {/block:IndexPage}
  3264. </div>
  3265.  
  3266. <!------------------------------>
  3267. {block:IndexPage}
  3268. <div class="permaright" clicktags="{select:click tags}">
  3269. {block:HasTags}
  3270. <a class="clicktags">
  3271. <i class="iconsax" icon-name="hashtag"></i>
  3272. </a>
  3273. {/block:HasTags}
  3274.  
  3275.  
  3276. <a href="{ReblogURL}" title="reblog this post">
  3277. <i class="iconsax" icon-name="repeat"></i>
  3278. </a>
  3279.  
  3280. <a title="like this post">
  3281. {LikeButton}
  3282. <i class="cp cp-heart-o"></i>
  3283. </a>
  3284. </div>
  3285. {/block:IndexPage}
  3286. <!------------------------------>
  3287.  
  3288. {block:PermalinkPage}
  3289. <div class="permaright">
  3290. {block:NotReblog}
  3291. original post
  3292. {/block:NotReblog}
  3293.  
  3294. {block:RebloggedFrom}
  3295. <a href="{ReblogParentURL}">via: &thinsp;{ReblogParentName}</a>
  3296. {/block:RebloggedFrom}
  3297. </div>
  3298. {/block:PermalinkPage}
  3299.  
  3300. </div><!--botperma-->
  3301. {/block:Date}
  3302. </div><!--posts-->
  3303.  
  3304. {block:PostNotes}
  3305. <div class="notescont">
  3306. <h1>{NoteCountWithLabel}</h1>
  3307. {PostNotes}
  3308. </div>
  3309. {/block:PostNotes}
  3310.  
  3311. {/block:Posts}
  3312.  
  3313. <!------ PAGINATION ------>
  3314. {block:Pagination}
  3315. <div class="botpagi">
  3316. {block:PreviousPage}
  3317. <a class="flex" href="{PreviousPage}">
  3318. <div class="prev-svg"></div>
  3319. <span>previous page</span>
  3320. </a>
  3321. {/block:PreviousPage}
  3322.  
  3323. {block:NextPage}
  3324. <a class="flex pn tsugi" href="{NextPage}">
  3325. <span>next page</span>
  3326. <div class="next-svg"></div>
  3327. </a>
  3328. {/block:NextPage}
  3329. </div>
  3330. {/block:Pagination}
  3331. </div><!--postscont-->
  3332.  
  3333. </div><!--ensoot-->
  3334. </div><!--nymoots-->
  3335. </div><!--mynoots-->
  3336.  
  3337. <!-- PLS DO NOT REMOVE THE CREDIT ILYSM -->
  3338. <a class="lah-nuit" href="//glenthemes.tumblr.com">glenthemes</a>
  3339.  
  3340. <script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  3341.  
  3342. </body>
  3343. </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!