API tools faq
paste
Advertisement
glenthemes

Theme [19]: Stardust

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