API tools faq
paste
Advertisement
mercurythms

blue moon (theme)

mercurythms
Jul 2nd, 2022 (edited)
2,652
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.59 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. theme 02: blue moon // @freddie-mercurys
  4.  
  5. credits
  6. - base code - @seyche
  7. - icon fonts - https://phosphoricons.com
  8. - css photosets - @annasthms and @eggdesign
  9. - npf photoset fix - @glenthemes
  10. - custom audio player - @annasthms
  11. - dark mode button inspired by @rstylr
  12. - tippy.js tooltips - atomiks
  13. - fade in effect - cory laviska
  14. - remove tumblr redirects - @magnusthemes
  15. - responsive iframes - @nouvae
  16. - custom like and reblog button inspired by @shythemes
  17. - notecount shortener by @shythemes
  18.  
  19. please don't remove credit or take parts of this code :)
  20.  
  21. -->
  22.  
  23. <!DOCTYPE html>
  24. <html lang="en" data-theme="light">
  25. <head>
  26. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  31. <meta charset="utf-8">
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.  
  34. <!-- variables and options -->
  35.  
  36. <meta name="image:sidebar" content=""/>
  37.  
  38. <meta name="color:background" content="#ffffff"/>
  39. <meta name="color:secondary background" content="#fbfbfb"/>
  40. <meta name="color:text" content="#333333"/>
  41. <meta name="color:link" content="#bbbbbb"/>
  42. <meta name="color:accent" content="#a1c4d8"/>
  43. <meta name="color:borders" content="#dddddd"/>
  44. <meta name="color:dark mode background" content="#212121"/>
  45. <meta name="color:dark mode secondary background" content="#333333"/>
  46. <meta name="color:dark mode text" content="#f6f6f6"/>
  47. <meta name="color:dark mode link" content="#cccccc"/>
  48. <meta name="color:dark mode accent" content="#d7bdca"/>
  49. <meta name="color:dark mode borders" content="#444444"/>
  50.  
  51. <meta name="select:post width" content="400px" title="400px"/>
  52. <meta name="select:post width" content="500px" title="500px"/>
  53. <meta name="select:post width" content="540px" title="540px"/>
  54.  
  55. <meta name="select:sidebar position" content="right" title="right"/>
  56. <meta name="select:sidebar position" content="left" title="left"/>
  57.  
  58. <meta name="select:sidebar image size" content="70px" title="small"/>
  59. <meta name="select:sidebar image size" content="100px" title="large"/>
  60.  
  61. <meta name="select:sidebar image shape" content="0%" title="square"/>
  62. <meta name="select:sidebar image shape" content="0.5em" title="rounded"/>
  63. <meta name="select:sidebar image shape" content="100%" title="circle"/>
  64. <meta name="select:sidebar image shape" content="30% 70% 70% 30% / 30% 30% 70% 70%" title="blob"/>
  65.  
  66. <meta name="if:rounded corners" content="1"/>
  67. <meta name="if:hide tags" content="1"/>
  68. <meta name="if:search bar" content="1"/>
  69. <meta name="if:updates tab" content="1"/>
  70.  
  71. <meta name="text:title" content="blog title"/>
  72. <meta name="text:description" content="this is where your description goes"/><meta name="text:font" content="Muli"/>
  73. <meta name="text:font size" content="13"/>
  74. <meta name="text:post margin" content="150"/>
  75.  
  76. <meta name="text:home link" content="home"/>
  77. <meta name="text:ask link" content="contact"/>
  78. <meta name="text:archive link" content="archive"/>
  79. <meta name="text:link 1 URL" content="/"/>
  80. <meta name="text:link 1" content="link 1"/>
  81. <meta name="text:link 2 URL" content="/"/>
  82. <meta name="text:link 2" content="link 2"/>
  83. <meta name="text:link 3 URL" content="/"/>
  84. <meta name="text:link 3" content="link 3"/>
  85. <meta name="text:link 4 URL" content="/"/>
  86. <meta name="text:link 4" content="link 4"/>
  87. <meta name="text:updates title" content="update title"/>
  88. <meta name="text:updates content" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis leo a leo gravida, in dictum velit ultricies. Suspendisse maximus."/>
  89.  
  90. <!--jquery-->
  91. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  92. <!--google fonts-->
  93. <link rel="preconnect" href="https://fonts.gstatic.com">
  94. <link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;600;700&display=swap" rel="stylesheet">
  95. <!--icon fonts-->
  96. <script src="https://unpkg.com/phosphor-icons"></script>
  97. <!--tooltips-->
  98. <script src="https://unpkg.com/popper.js@1"></script>
  99. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  100. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/animations/perspective.css"/>
  101. <!--photoset fixes-->
  102. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  103. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  104. <!--
  105. NPF images fix v3.0 by @glenthemes [2021]
  106. 💌 git.io/JRBt7
  107. --->
  108. <script src="//npf-images-v3.github.io/script.js"></script>
  109. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  110. <style tmblr-npf>
  111. :root {
  112. --NPF-Caption-Spacing:2em;
  113. --NPF-Image-Spacing:4px;
  114. }
  115. </style>
  116. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  117. <!-- responsive iframes -->
  118. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  119. <!--custom audio player-->
  120. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  121. <!--smooth scroll-->
  122. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  123.  
  124. <script>const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  125. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme); </script>
  126.  
  127. <style type="text/css">
  128.  
  129. :root {
  130. --google-font: {text:font};
  131. --font-size: {text:font size}px;
  132. --post-width: {select:post width};
  133. --post-margin: {text:post margin}px;
  134. --sidebar-image-size: {select:sidebar image size};
  135. --sidebar-image-shape: {select:sidebar image shape};
  136. --sidebar-position: {select:sidebar position};
  137. {block:ifroundedcorners}
  138. --rounded-corners: 0.5em;
  139. {/block:ifroundedcorners}
  140. {block:ifnotroundedcorners}
  141. --rounded-corners: 0em;
  142. {/block:ifnotroundedcorners}
  143. }
  144.  
  145. :root, html[data-theme='light'] {
  146. --LightOn: block;
  147. --LightOff: none;
  148. --background-color: {color:background};
  149. --secondary-background-color: {color:secondary background};
  150. --text-color: {color:text};
  151. --link-color: {color:link};
  152. --accent-color: {color:accent};
  153. --border-color: {color:borders};
  154. }
  155.  
  156. html[data-theme='dark'] {
  157. --LightOn: none;
  158. --LightOff: block;
  159. --background-color: {color:dark mode background};
  160. --secondary-background-color: {color:dark mode secondary background};
  161. --text-color: {color:dark mode text};
  162. --link-color: {color:dark mode link};
  163. --accent-color: {color:dark mode accent};
  164. --border-color: {color:dark mode borders};
  165. }
  166.  
  167. html.theme-transition,
  168. html.theme-transition *,
  169. html.theme-transition *:before,
  170. html.theme-transition *:after {
  171. transition: 0s !important;
  172. transition-delay: 0 !important;
  173. }
  174.  
  175. /*--basic styling--*/
  176.  
  177. * {box-sizing: border-box;}
  178.  
  179. body {
  180. font-family: var(--google-font);
  181. font-size: var(--font-size);
  182. -webkit-font-smoothing: antialiased;
  183. color: var(--text-color);
  184. background-color: var(--background-color);
  185. line-height: 180%;
  186. word-wrap: break-word;
  187. letter-spacing: 0.2px;
  188. margin: 0;
  189. padding: 0;
  190. transition: 0.3s opacity;
  191. }
  192.  
  193. body.fade-out {
  194. opacity: 0;
  195. transition: none;
  196. }
  197.  
  198. a {
  199. color: var(--link-color);
  200. text-decoration: none;
  201. -webkit-transition: all 0.3s;
  202. -moz-transition: all 0.3s;
  203. -ms-transition: all 0.3s;
  204. -o-transition: all 0.3s;
  205. transition: all 0.3s;
  206. }
  207.  
  208. a:hover {
  209. color: var(--accent-color);
  210. -webkit-transition: all 0.3s;
  211. -moz-transition: all 0.3s;
  212. -ms-transition: all 0.3s;
  213. -o-transition: all 0.3s;
  214. transition: all 0.3s;
  215. }
  216.  
  217. blockquote {
  218. padding: 0 0 0 1.5em;
  219. border-left: 1px solid var(--border-color);
  220. margin: 1.5em 0 1.5em 1.5em;
  221. }
  222.  
  223. h1, h2, h3, h4, h5, .title {
  224. letter-spacing: 0.4px;
  225. font-weight: 700;
  226. }
  227.  
  228. h1, .title {font-size: 1.3em;}
  229. h2, h3, h4, h5 {font-size: 1em;}
  230. .title a {color: var(--accent-color) !important;}
  231.  
  232. small, big {font-size: 1em;}
  233.  
  234. hr {
  235. height: 1px;
  236. border: none;
  237. box-shadow: none;
  238. background-color: var(--border-color);
  239. }
  240.  
  241. pre {
  242. line-height: inherit;
  243. font-size: inherit;
  244. white-space: pre-wrap;
  245. white-space: -moz-pre-wrap;
  246. white-space: -pre-wrap;
  247. white-space: -o-pre-wrap;
  248. word-wrap: break-word;
  249. }
  250.  
  251. /*--controls and dark mode button--*/
  252.  
  253. #top-buttons {
  254. display: flex;
  255. flex-direction: column;
  256. align-items: flex-end;
  257. grid-gap: 1.5em;
  258. position: fixed;
  259. top: 20px;
  260. right: 20px;
  261. z-index: 999999;
  262. }
  263.  
  264. #controls-icon {
  265. cursor: pointer;
  266. font-size: calc(var(--font-size) + 5px);
  267. background: var(--secondary-background-color);
  268. color: var(--accent-color);
  269. padding: 5px;
  270. border: 1px solid var(--border-color);
  271. border-radius: 5px;
  272. vertical-align: middle;
  273. -webkit-transition: all 0.3s;
  274. -moz-transition: all 0.3s;
  275. -ms-transition: all 0.3s;
  276. -o-transition: all 0.3s;
  277. transition: all 0.3s;
  278. }
  279.  
  280. #controls-icon:hover {
  281. background: var(--accent-color);
  282. color: var(--background-color);
  283. -webkit-transition: all 0.3s;
  284. -moz-transition: all 0.3s;
  285. -ms-transition: all 0.3s;
  286. -o-transition: all 0.3s;
  287. transition: all 0.3s;
  288. }
  289.  
  290. button#theme-toggle {
  291. outline: none;
  292. border: 0;
  293. background: transparent;
  294. padding: 0;
  295. cursor: pointer;
  296. }
  297.  
  298. .light-on{
  299. display: var(--LightOn);
  300. }
  301. .light-off{
  302. display: var(--LightOff);
  303. }
  304.  
  305. body.controls-click .tmblr-iframe {
  306. position: fixed;
  307. opacity: 0.8;
  308. visibility: visible;
  309. -webkit-transition: all 0.5s;
  310. -moz-transition: all 0.5s;
  311. -ms-transition: all 0.5s;
  312. -o-transition: all 0.5s;
  313. transition: all 0.5s;
  314. }
  315.  
  316. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  317. z-index: 999999!important;
  318. top: 13px !important;
  319. right: 55px !important;
  320. opacity: 0;
  321. visibility: hidden;
  322. transform: scale(0.8);
  323. transform-origin: 100% 0;
  324. -webkit-transform: scale(0.8);
  325. -webkit-transform-origin: 100% 0;
  326. -o-transform: scale(0.8);
  327. -o-transform-origin: 100% 0;
  328. -moz-transform: scale(0.8);
  329. -moz-transform-origin: 100% 0;
  330. -ms-transform: scale(0.8);
  331. -ms-transform-origin: 100% 0;
  332. -webkit-transition: all 0.5s;
  333. -moz-transition: all 0.5s;
  334. -ms-transition: all 0.5s;
  335. -o-transition: all 0.5s;
  336. transition: all 0.5s;
  337. }
  338.  
  339. .tmblr-iframe--app-cta-button {display: none!important;}
  340.  
  341. /*updates tab*/
  342.  
  343. {block:ifupdatestab}
  344.  
  345. #update-box {
  346. display: none;
  347. width: 200px;
  348. line-height: 150%;
  349. padding: 1em;
  350. background: var(--secondary-background-color);
  351. border-radius: var(--rounded-corners);
  352. border: 1px solid var(--border-color);
  353. }
  354.  
  355. #update-title {
  356. font-weight: 600;
  357. margin-bottom: 0.5em;
  358. }
  359.  
  360. {/block:ifupdatestab}
  361.  
  362. /*--scrollbar--*/
  363.  
  364. ::-webkit-scrollbar {
  365. width:19px;
  366. height:19px;
  367. }
  368.  
  369. ::-webkit-scrollbar {
  370. background-color:var(--background-color);
  371. }
  372.  
  373. ::-webkit-scrollbar-track {
  374. border:9px solid var(--background-color);
  375. background-color:var(--border-color);
  376. }
  377.  
  378. ::-webkit-scrollbar-thumb {
  379. border:7px solid var(--background-color);
  380. background-color:var(--accent-color);
  381. min-height:24px;
  382. min-width:24px;
  383. }
  384.  
  385. /*--tooltips--*/
  386.  
  387. .tippy-tooltip.custom-theme {
  388. background: var(--secondary-background-color);
  389. color: var(--text-color);
  390. font-size: var(--font-size);
  391. text-transform: lowercase;
  392. text-align: center;
  393. border-radius: var(--rounded-corners);
  394. border: 1px solid var(--border-color);
  395. }
  396.  
  397. /*--sidebar--*/
  398.  
  399. #sidebar {
  400. display: flex;
  401. flex-direction: column;
  402. grid-gap: 1.5em;
  403. width: 200px;
  404. position: fixed;
  405. top: var(--post-margin);
  406. }
  407.  
  408. .right #sidebar {margin-left: calc(var(--post-width) + 100px);}
  409.  
  410. #sidebar-wrapper, #description-wrapper {
  411. display: flex;
  412. flex-direction: column;
  413. grid-gap: 1em;
  414. }
  415.  
  416. {block:ifSidebarImage}
  417. #side-img {
  418. margin-bottom: 0.5em;
  419. border-radius: var(--sidebar-image-shape);
  420. width: var(--sidebar-image-size);
  421. }
  422. {/block:ifSidebarImage}
  423.  
  424. .find {
  425. padding: 2px 4px;
  426. border: 1px solid var(--border-color);
  427. border-radius: var(--rounded-corners);
  428. }
  429.  
  430. .find input {
  431. border: 0;
  432. outline: 0;
  433. background: var(--background-color);
  434. font-family: inherit;
  435. color: var(--text-color);
  436. font-size: var(--font-size);
  437. }
  438.  
  439. .find input[type=text] {
  440. font-size: calc(var(--font-size) - 1px);
  441. color: var(--text-color);
  442. }
  443.  
  444. #nav-wrapper {
  445. display: flex;
  446. flex-direction: column;
  447. grid-gap: 0.5em;
  448. }
  449.  
  450. #nav, #more-links {
  451. display: flex;
  452. flex-direction: row;
  453. flex-wrap: wrap;
  454. align-items: center;
  455. }
  456.  
  457. #nav a {margin-right: 1em;}
  458.  
  459. #more-links {display: none;}
  460.  
  461. #more-links a {margin-right: 1em;}
  462.  
  463. #dropdown, #nav-icon {
  464. cursor: pointer;
  465. font-size: calc(var(--font-size) + 10px);
  466. color: var(--accent-color);
  467. vertical-align: middle;
  468. }
  469.  
  470. .rotate{
  471. -moz-transition: all 0.2s linear;
  472. -webkit-transition: all 0.2s linear;
  473. transition: all 0.2s linear;
  474. }
  475.  
  476. .rotate.down{
  477. -ms-transform: rotateX(180deg);
  478. -moz-transform: rotateX(180deg);
  479. -webkit-transform: rotateX(180deg);
  480. transform: rotateX(180deg);
  481. transform-origin: center;
  482. }
  483.  
  484. /*--posts--*/
  485.  
  486. main {
  487. position: relative;
  488. width: calc(200px + (var(--post-width)) + 100px);
  489. margin: auto;
  490. }
  491.  
  492. .left section {
  493. position: relative;
  494. width: var(--post-width);
  495. margin: 0 0 0 300px;
  496. }
  497. .right section {
  498. position: relative;
  499. width: var(--post-width);
  500. margin: 0 300px 0 0;
  501. }
  502.  
  503. article {
  504. width: 100%;
  505. position: relative;
  506. margin: var(--post-margin) auto;
  507. }
  508.  
  509. article hr {margin-top: 2em};
  510.  
  511. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  512.  
  513. /*--captions--*/
  514.  
  515. .caption {
  516. margin-top: 2em;
  517. padding-bottom: 1em;
  518. border-bottom: 1px solid var(--border-color);
  519. }
  520. .caption:last-of-type {padding-bottom: 0; border-bottom: 0;}
  521.  
  522. .text-caption:first-of-type {margin-top: 0;}
  523.  
  524. .user-icon, .ask-icon {
  525. display: inline-block;
  526. vertical-align: middle;
  527. margin-right: 1em;
  528. padding: 4px;
  529. background-color: var(--secondary-background-color);
  530. border: 1px solid var(--border-color);
  531. border-radius: 100% !important;
  532. }
  533.  
  534. .user-icon {width: 2em; height: 2em;}
  535. .ask-icon {width: 3.5em; height: 3.5em;}
  536.  
  537. .username {
  538. display: inline-block;
  539. vertical-align: middle;
  540. font-weight: 600;
  541. }
  542.  
  543. .username a {color: var(--text-color) !important;}
  544. .username a:hover {color: var(--accent-color) !important;}
  545.  
  546. .deactive::after {
  547. content: '(deactivated)';
  548. margin-left: 1em;
  549. opacity: 0.75;
  550. color: var(--text-color);
  551. }
  552.  
  553. p.tmblr-attribution {margin-top: 1em !important;}
  554.  
  555. /*--text--*/
  556.  
  557. h1.post-title {margin-top: 0;}
  558.  
  559. /*--link--*/
  560.  
  561. a.link-wrap {display: block;}
  562. .link {padding: 0;}
  563.  
  564. .npf-link-block {
  565. margin-top: 1em;
  566. background-color: inherit;
  567. border: 0;
  568. color: inherit;
  569. }
  570.  
  571. /*--photo/video--*/
  572.  
  573. img {
  574. margin: 0;
  575. display: block;
  576. height: auto;
  577. max-width: 100%;
  578. }
  579.  
  580. .photo img, .video {
  581. width: 100%;
  582. border-radius: var(--rounded-corners);
  583. overflow: hidden;
  584. }
  585. .vignette, #vignette {opacity: 0;}
  586. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  587.  
  588. .lightbox-image, #tumblr_lightbox img {
  589. box-shadow: none !important;
  590. border-radius: 0 !important;
  591. max-width: none;
  592. }
  593.  
  594. #tumblr_lightbox_caption, .lightbox-caption {
  595. color: #fff !important;
  596. font-family: inherit;
  597. margin-top: 1em !important;
  598. }
  599.  
  600. /*--photoset--*/
  601.  
  602. [photoset-layout] {
  603. grid-gap: 4px;
  604. border-radius: var(--rounded-corners);
  605. overflow: hidden;
  606. }
  607.  
  608. .npf_inst {
  609. border-radius: var(--rounded-corners);
  610. overflow: hidden;
  611. }
  612.  
  613. /*--quote--*/
  614.  
  615. .quote, p.npf_quote {
  616. letter-spacing: 0.5px;
  617. font-weight: 700;
  618. font-size: 1.3em;
  619. }
  620.  
  621. p.npf_quote {font-family: inherit;}
  622.  
  623. .quote p:first-of-type {margin-top: 0;}
  624. .quote p:last-of-type {margin-bottom: 0;}
  625.  
  626. .source {margin-top: 1.5em;}
  627.  
  628. /*--chat--*/
  629.  
  630. .chat {padding: 0; margin: 0;}
  631. .chat li {list-style-type: none; margin-top: 1em;}
  632. .chat li:first-of-type {margin-top: 0;}
  633. .chatter {font-weight: 600;}
  634.  
  635. p.npf_chat, p.npf_chat b {font-family: inherit;}
  636.  
  637. /*--answer--*/
  638.  
  639. .ask-wrap {border: 1px solid var(--border-color); padding: 1.5em; border-radius: var(--rounded-corners); background: var(--secondary-background-color);}
  640.  
  641. .ask-wrap .asking {
  642. display: inline-block;
  643. vertical-align: middle;
  644. font-weight: 600;
  645. text-transform: lowercase;
  646. }
  647. .ask-wrap .asking a {color: var(--text-color) !important;}
  648. .ask-wrap .asking a:hover {color: var(--accent-color) !important;}
  649. .asked, .answered {display: inline-block; opacity: 0.7;}
  650.  
  651. .question {margin-top: 1em;}
  652. .question p:first-of-type {margin-top: 0;}
  653. .question p:last-of-type {margin-bottom: 0;}
  654.  
  655. /*--audio--*/
  656.  
  657. .audio_post {
  658. display: flex;
  659. align-items: center;
  660. background-color: var(--secondary-background-color);
  661. border-radius: var(--rounded-corners);
  662. border: 1px solid var(--border-color);
  663. padding: 1em;
  664. }
  665.  
  666. .audio_player {
  667. display: flex;
  668. justify-content: space-between;
  669. align-items: center;
  670. width: 100%;
  671. }
  672.  
  673. .audio_wrap {
  674. display:flex;
  675. align-items: center;
  676. }
  677.  
  678. .audio_info {margin-left: 1.5em;}
  679.  
  680. .track {
  681. display: block;
  682. font-weight: 600;
  683. }
  684.  
  685. .album-art {
  686. width: 80px;
  687. height: 80px;
  688. border-radius: 100%;
  689. }
  690.  
  691. #audio-player-icon {
  692. cursor: pointer;
  693. font-size: calc(var(--font-size) + 5px);
  694. background: var(--background-color);
  695. color: var(--text-color);
  696. padding: 15px;
  697. border: 1px solid var(--border-color);
  698. border-radius: 100%;
  699. vertical-align: middle;
  700. -webkit-transition: all 0.3s;
  701. -moz-transition: all 0.3s;
  702. -ms-transition: all 0.3s;
  703. -o-transition: all 0.3s;
  704. transition: all 0.3s;
  705. }
  706. #audio-player-icon:hover {
  707. background: var(--accent-color);
  708. color: var(--background-color);
  709. -webkit-transition: all 0.3s;
  710. -moz-transition: all 0.3s;
  711. -ms-transition: all 0.3s;
  712. -o-transition: all 0.3s;
  713. transition: all 0.3s;
  714. }
  715.  
  716. .custom_audio_seekbar {
  717. height: 0;
  718. }
  719.  
  720. .spotify_audio_player, .soundcloud_audio_player {
  721. max-height: 80px;
  722. border-radius: var(--rounded-corners);
  723. }
  724.  
  725. /*--info--*/
  726.  
  727. .info {
  728. display: flex;
  729. justify-content: space-between;
  730. align-content: center;
  731. margin-top: 2em;
  732. vertical-align: middle;
  733. }
  734.  
  735. .info a {color:var(--text-color);}
  736. .info a:hover {color:var(--accent-color);}
  737.  
  738. .info-left, .info-right {
  739. display: flex;
  740. align-items: center;
  741. grid-gap: 1em;
  742. }
  743.  
  744. .date {
  745. font-weight: 600;
  746. text-transform: uppercase;
  747. letter-spacing: 1.2px;
  748. }
  749.  
  750. .dash {
  751. content:"";
  752. width: 30px;
  753. height: 1px;
  754. vertical-align: middle;
  755. background: var(--border-color);
  756. }
  757.  
  758. #post-info-icon, #pinned-post-icon {
  759. cursor: pointer;
  760. font-size: calc(var(--font-size) + 5px);
  761. vertical-align: middle;
  762. }
  763.  
  764. #post-info-icon {color: var(--text-color);}
  765. #pinned-post-icon {color: var(--accent-color);}
  766.  
  767. .like {position: relative;}
  768.  
  769. .like .like_button {
  770. position: absolute;
  771. top: 0;
  772. left: 0;
  773. right: 0;
  774. bottom: 0;
  775. width: 100%;
  776. height: 100%;
  777. opacity: 0;
  778. }
  779.  
  780. .like .like_button iframe {
  781. width: 100%!important;
  782. height: 100%!important;
  783. }
  784.  
  785. .like_button.liked + #post-info-icon {color: #dc143c!important;}
  786.  
  787. .tags {
  788. display: flex;
  789. flex-direction: row;
  790. flex-wrap: wrap;
  791. align-items: center;
  792. margin-top: 1em;
  793. {block:ifhidetags}
  794. display: none;
  795. {/block:ifhidetags}
  796. }
  797.  
  798. .tags a {margin-right: 1.5em;}
  799.  
  800. a.pinned-post {font-weight: 600; color: var(--accent-color);}
  801.  
  802. /*--post notes--*/
  803.  
  804. .notes {margin-top: var(--post-margin);}
  805.  
  806. ol.notes {
  807. max-width: 100%;
  808. padding: 0;
  809. margin-top: 2em;
  810. }
  811.  
  812. ol.notes li.note {
  813. padding: 0.5em 0;
  814. list-style-type: none;
  815. }
  816.  
  817. ol.notes li.note img.avatar {display: none;}
  818.  
  819. ol.notes li.reblog::before, ol.notes li.like::before, ol.notes li.reply::before {
  820. font-family: 'phosphor';
  821. font-size: calc(var(--font-size) + 3px);
  822. color: var(--accent-color);
  823. vertical-align: middle;
  824. margin-right: 1em;
  825. }
  826.  
  827. ol.notes li.reblog::before {content: "\f267";}
  828. ol.notes li.like::before {content: "\f460";}
  829. ol.notes li.reply::before {content: "\f339";}
  830. ol.notes li.original_post:before {content: "\f613";}
  831.  
  832. /*--pagination--*/
  833.  
  834. #page-navigation {
  835. display: flex;
  836. justify-content: space-between;
  837. align-items: center;
  838. }
  839.  
  840. #page-navigation a {
  841. color: var(--text-color);
  842. }
  843.  
  844. .previous-next, .pages {
  845. display: flex;
  846. align-items: center;
  847. grid-gap: 1em;
  848. }
  849.  
  850. .current-page {
  851. font-weight: bold;
  852. color: var(--accent-color);
  853. }
  854.  
  855. /*--scroll to top and credit--*/
  856.  
  857. #bottom-buttons {
  858. display: flex;
  859. flex-direction: column;
  860. position: fixed;
  861. bottom: 20px;
  862. right: 20px;
  863. z-index: 999999;
  864. grid-gap: 1.5em;
  865. }
  866.  
  867. /*--responsiveness--*/
  868.  
  869. @media only screen and (max-width: 1100px) {
  870. main {width: var(--post-width);}
  871.  
  872. #sidebar, .right #sidebar {
  873. position: relative;
  874. margin: var(--post-margin) auto;
  875. width: 100%;
  876. top: auto;
  877. }
  878.  
  879. #sidebar-wrapper {
  880. flex-direction: row;
  881. grid-gap: 3em;
  882. align-items: center;
  883. }
  884.  
  885. #side-img {width: 100px; margin-bottom: 0;}
  886.  
  887. .left section {margin-left: 0;}
  888. .right section {margin-right: 0;}
  889. }
  890.  
  891. @media only screen and (max-width: 720px) {
  892. main, .left section, .right section {width: 80vw;}
  893.  
  894. #controls, .tippy-tooltip.custom-theme {display:none;}
  895. }
  896.  
  897. {CustomCSS}
  898.  
  899. </style>
  900. </head>
  901.  
  902. <!--html-->
  903.  
  904. <body>
  905.  
  906. <script>document.body.className += ' fade-out';</script>
  907.  
  908. <!--controls-->
  909.  
  910. <div id="top-buttons">
  911. <a id="controls" title="show controls"><i class="ph-gear-six-fill" id="controls-icon"></i></a>
  912.  
  913. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  914. <span class="light-on" title="dark mode"><i class="ph-moon-fill" id="controls-icon"></i></span>
  915. <span class="light-off" title="light mode"><i class="ph-sun-dim-fill" id="controls-icon"></i></span>
  916. </button>
  917.  
  918. <!--updates tab-->
  919.  
  920. {block:ifupdatestab}
  921.  
  922. <div id="update-icon" title="updates"><i class="ph-bell-fill" id="controls-icon"></i></div>
  923.  
  924. <div id="update-box">
  925. <div id="update-title">{text:updates title}</div>
  926. {text:updates content}
  927. </div>
  928.  
  929. {/block:ifupdatestab}
  930.  
  931. </div>
  932.  
  933. <main class="{select:sidebar position}"><!--main = main container-->
  934.  
  935. <!--sidebar-->
  936.  
  937. <aside id="sidebar">
  938. <div id="sidebar-wrapper">
  939. {block:ifsidebarimage}<img src="{image:sidebar}" id="side-img" alt="sidebar image"/></a>{/block:ifsidebarimage}
  940. <div id="description-wrapper">
  941. <div class="title"><a href="/">{text:title}</a></div>
  942. {block:Description}<div id="description">{text:description}</div>{/block:Description}
  943. </div>
  944. </div>
  945. {block:ifsearchbar}<form action="/search" method="get" class="find" name="sform">
  946. <input type="text" name="q" placeholder="search blog..." value="{SearchQuery}" value autocomplete="off" class="upper"/>
  947. </form>{/block:ifsearchbar}
  948. <div id="nav-wrapper">
  949. <div id="nav">
  950. {block:ifHomeLink}<a href="/" title="{text:Home Link}"><i class="ph-house" id="nav-icon"></i></a>{/block:ifHomeLink}
  951. {block:ifAskLink}<a href="/ask" title="{text:Ask Link}"><i class="ph-chat-teardrop" id="nav-icon"></i></a>{/block:ifAskLink}
  952. {block:ifArchiveLink}<a href="/archive" title="{text:Archive Link}"><i class="ph-folder" id="nav-icon"></i></a>{/block:ifArchiveLink}
  953. <div class="rotate"><i class="ph-caret-circle-down" id="dropdown" title="explore more"></i></div>
  954. </div>
  955. <div id="more-links">
  956. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  957. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  958. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  959. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  960. </div>
  961. </div>
  962. </aside>
  963.  
  964. <section><!-- section = post container -->
  965.  
  966. <!--posts-->
  967.  
  968. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  969. <article class="posts" id="{PostID}" post-type="{PostType}">
  970.  
  971. {block:Text}
  972. <div id="text-container">
  973. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  974. {block:NotReblog}
  975. <div class="caption text-caption">
  976. {Body}
  977. </div>
  978. {/block:NotReblog}
  979. {block:RebloggedFrom}
  980. {block:Reblogs}
  981. <div class="caption text-caption">
  982. <div class="commenter source-head">
  983. <img src="{PortraitURL-64}" class="user-icon">
  984. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  985. </div>
  986. <div class="comment">{Body}</div>
  987. </div>
  988. {/block:Reblogs}
  989. {/block:RebloggedFrom}
  990. </div>
  991. {/block:Text}
  992.  
  993. {block:Link}
  994. <div id="link-container">
  995. <a href="{URL}" class="link-wrap">
  996. <div class="link">
  997. <div class="title">{Name}</div>
  998. </div>
  999. </a>
  1000. {block:Description}
  1001. {block:NotReblog}
  1002. <div class="caption">
  1003. {Description}
  1004. </div>
  1005. {/block:NotReblog}
  1006. {/block:Description}
  1007. {block:RebloggedFrom}
  1008. {block:Reblogs}
  1009. <div class="caption">
  1010. <div class="commenter">
  1011. <img src="{PortraitURL-64}" class="user-icon">
  1012. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1013. </div>
  1014. <div class="comment">{Body}</div>
  1015. </div>
  1016. {/block:Reblogs}
  1017. {/block:RebloggedFrom}
  1018. </div>
  1019. {/block:Link}
  1020.  
  1021. {block:Photo}
  1022. <div id="photo-container">
  1023. <div class="photo">
  1024. {LinkOpenTag}<a href="#" 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 src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1025. </div>
  1026. {block:Caption}
  1027. {block:NotReblog}
  1028. <div class="caption">
  1029. {Caption}
  1030. </div>
  1031. {/block:NotReblog}
  1032. {block:RebloggedFrom}
  1033. {block:Reblogs}
  1034. <div class="caption">
  1035. <div class="commenter">
  1036. <img src="{PortraitURL-64}" class="user-icon">
  1037. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1038. </div>
  1039. <div class="comment">{Body}</div>
  1040. </div>
  1041. {/block:Reblogs}
  1042. {/block:RebloggedFrom}
  1043. {/block:Caption}
  1044. </div>
  1045. {/block:Photo}
  1046.  
  1047. {block:Photoset}
  1048. <div id="photoset-container">
  1049. <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>
  1050. {block:Caption}
  1051. {block:NotReblog}
  1052. <div class="caption">
  1053. {Caption}
  1054. </div>
  1055. {/block:NotReblog}
  1056. {block:RebloggedFrom}
  1057. {block:Reblogs}
  1058. <div class="caption">
  1059. <div class="commenter">
  1060. <img src="{PortraitURL-64}" class="user-icon">
  1061. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1062. </div>
  1063. <div class="comment">{Body}</div>
  1064. </div>
  1065. {/block:Reblogs}
  1066. {/block:RebloggedFrom}
  1067. {/block:Caption}
  1068. </div>
  1069. {/block:Photoset}
  1070.  
  1071. {block:Video}
  1072. <div id="video-container">
  1073. <div class="video">{Video-500}</div>
  1074. {block:Caption}
  1075. {block:NotReblog}
  1076. <div class="caption">
  1077. {Caption}
  1078. </div>
  1079. {/block:NotReblog}
  1080. {block:RebloggedFrom}
  1081. {block:Reblogs}
  1082. <div class="caption">
  1083. <div class="commenter">
  1084. <img src="{PortraitURL-64}" class="user-icon">
  1085. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1086. </div>
  1087. <div class="comment">{Body}</div>
  1088. </div>
  1089. {/block:Reblogs}
  1090. {/block:RebloggedFrom}
  1091. {/block:Caption}
  1092. </div>
  1093. {/block:Video}
  1094.  
  1095. {block:Quote}
  1096. <div id="quote-container">
  1097. <div class="quote">{Quote}</div>
  1098. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1099. </div>
  1100. {/block:Quote}
  1101.  
  1102. {block:Chat}
  1103. <div id="chat-container">
  1104. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1105. <ul class="chat">{block:Lines}
  1106. <li>
  1107. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1108. {Line}
  1109. </li>
  1110. {/block:Lines}</ul>
  1111. </div>
  1112. {/block:Chat}
  1113.  
  1114. {block:Answer}
  1115. <div id="ask-container">
  1116. <div class="ask-wrap">
  1117. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1118. <div class="asking">{Asker} <div class="asked">asked</div></div>
  1119. <div class="question">{Question}</div>
  1120. </div>
  1121. {block:Answerer}
  1122. <div class="caption">
  1123. <div class="commenter">
  1124. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1125. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a> <div class="answered">said</div></div>
  1126. </div>
  1127. <div class="answer">{Answer}</div>
  1128. </div>
  1129. {/block:Answerer}
  1130. {block:NotReblog}
  1131. <div class="caption">
  1132. <div class="replies">{Replies}</div>
  1133. </div>
  1134. {/block:NotReblog}
  1135. {block:RebloggedFrom}
  1136. {block:Reblogs}
  1137. <div class="caption">
  1138. <div class="commenter">
  1139. <img src="{PortraitURL-64}" class="user-icon">
  1140. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1141. </div>
  1142. <div class="comment">{Body}</div>
  1143. </div>
  1144. {/block:Reblogs}
  1145. {/block:RebloggedFrom}
  1146. </div>
  1147. {/block:Answer}
  1148.  
  1149. {block:Audio}
  1150. <div id="audio-container">
  1151. {block:AudioPlayer}
  1152. {AudioPlayer}
  1153. <div class="audio_post">
  1154. <div class="audio_player">
  1155. <div class="audio_wrap">
  1156. <span class="custom_audio_buttons"></span>
  1157. <div class="audio_info">
  1158. {block:TrackName}<div class="track">{TrackName}</div>{/block:TrackName}
  1159. {block:Artist}{Artist}{/block:Artist}
  1160. </div>
  1161. </div>
  1162. {block:AlbumArt}
  1163. <img src="{AlbumArtURL}" class="album-art">
  1164. {/block:AlbumArt}
  1165. </div>
  1166. <div class="custom_audio_seekbar"></div>
  1167. </div>
  1168. {/block:AudioPlayer}
  1169. {block:Caption}
  1170. {block:NotReblog}
  1171. <div class="caption">
  1172. {Caption}
  1173. </div>
  1174. {/block:NotReblog}
  1175. {block:RebloggedFrom}
  1176. {block:Reblogs}
  1177. <div class="caption">
  1178. <div class="commenter">
  1179. <img src="{PortraitURL-64}" class="user-icon">
  1180. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1181. </div>
  1182. <div class="comment">{Body}</div>
  1183. </div>
  1184. {/block:Reblogs}
  1185. {/block:RebloggedFrom}
  1186. {/block:Caption}
  1187. </div>
  1188. {/block:Audio}
  1189.  
  1190. <hr>
  1191.  
  1192. <!--info-->
  1193.  
  1194. {block:Date}
  1195. <div class="info">
  1196. <div class="info-left">
  1197. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="ph-push-pin-simple" id="pinned-post-icon"></i></a>{/block:PinnedPostLabel}
  1198. <a class="date" href="{Permalink}">{DayOfMonthWithZero} {ShortMonth}</a>
  1199. {block:NoteCount}
  1200. <div class="dash"></div>
  1201. <a class="notecount" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  1202. </div>
  1203.  
  1204. <!-- like and reblog buttons -->
  1205.  
  1206. <div class="info-right">
  1207. <a href="{ReblogURL}" target="_blank" title="reblog this post"><i class="ph-arrow-clockwise-light" id="post-info-icon"></i></a>
  1208. <a class="like" title="like this post">{LikeButton}<i class="ph-heart-light" id="post-info-icon"></i></a>
  1209.  
  1210. <!--tags-->
  1211.  
  1212. {block:HasTags}{block:ifhidetags}<a class="tag-icon" title="show tags"><i class="ph-hash-light" id="post-info-icon"></i></a>{/block:ifhidetags}{/block:HasTags}
  1213. </div>
  1214. </div>
  1215.  
  1216. {/block:Date}
  1217.  
  1218. {block:HasTags}
  1219. <div class="tags">
  1220. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1221. </div>
  1222. {/block:HasTags}
  1223.  
  1224. <!--post notes-->
  1225.  
  1226. {block:PermalinkPage}{block:Date}
  1227. {block:NoteCount}{block:PostNotes}
  1228. <div class="notes">
  1229. {PostNotes-64}
  1230. </div>
  1231. {/block:PostNotes}{/block:NoteCount}
  1232. {/block:Date}{/block:PermalinkPage}
  1233.  
  1234. </article>
  1235. {/block:Posts}
  1236.  
  1237. <!--pagination-->
  1238.  
  1239. {block:Pagination}
  1240. <article id="page-navigation">
  1241. <div class="previous-next">
  1242. <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}">prev</a>
  1243. <div class="dash"></div>
  1244. <a href="{block:NextPage}{NextPage}{/block:NextPage}">next</a>
  1245. </div>
  1246. <div class="pages">{block:JumpPagination length="5"}
  1247. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1248. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1249. {/block:JumpPagination}
  1250. </div>
  1251. </article>
  1252. {/block:Pagination}
  1253.  
  1254. </section><!-- end of posts container -->
  1255.  
  1256. </main><!-- end of main container -->
  1257.  
  1258. <!--scroll to top button and credit-->
  1259.  
  1260. <div id="bottom-buttons">
  1261. <a href="#" title="back to top" id="scrollup"><i class="ph-caret-up-bold" id="controls-icon"></i></a>
  1262. <a href="https://freddie-mercurys.tumblr.com" title="theme by @freddie-mercurys" id="credit"><i class="ph-smiley-bold" id="controls-icon"></i></a>
  1263. </div>
  1264.  
  1265. <script>
  1266.  
  1267. // fade effect
  1268. $(function() {
  1269. $('body').removeClass('fade-out');
  1270. });
  1271.  
  1272. //show controls
  1273. $(document).ready(function(){
  1274. $('#controls').click(function(){
  1275. $('body').toggleClass('controls-click');
  1276. });
  1277. });
  1278.  
  1279. //dark mode button
  1280. const toggle = document.getElementById("theme-toggle");
  1281.  
  1282. toggle.onclick = function () {
  1283. document.documentElement.classList.add("theme-transition");
  1284.  
  1285. let currentTheme = document.documentElement.getAttribute("data-theme");
  1286. let targetTheme = "light";
  1287.  
  1288. if (currentTheme === "light") {
  1289. targetTheme = "dark";
  1290. }
  1291.  
  1292. window.setTimeout(function () {
  1293. document.documentElement.classList.remove("theme-transition");
  1294. }, 50);
  1295.  
  1296. document.documentElement.setAttribute("data-theme", targetTheme);
  1297. localStorage.setItem("theme", targetTheme);
  1298. };
  1299.  
  1300. //updates
  1301. $("#update-icon").click(function(){
  1302. $("#update-box").slideToggle(500);
  1303. });
  1304.  
  1305. //scroll to top
  1306. $("#scrollup").click(function(){
  1307. $("html, body").animate({scrollTop : 0},800);
  1308. return false;
  1309. });
  1310.  
  1311. //show navigation
  1312. $("#dropdown").click(function(){
  1313. $(this).parents("#sidebar").find("#more-links").slideToggle(500);
  1314. });
  1315. $(".rotate").click(function(){
  1316. $(this).toggleClass("down");
  1317. });
  1318.  
  1319. //show tags
  1320. $(".tag-icon").click(function(){
  1321. $(this).parents(".posts").find(".tags").slideToggle(300);
  1322. });
  1323.  
  1324. //tooltips
  1325. tippy('[title]', {
  1326. theme: 'custom',
  1327. arrow: false,
  1328. followCursor: true,
  1329. delay: 100,
  1330. placement: 'top',
  1331. zIndex: 9999999999,
  1332. maxWidth: 200,
  1333. animation: 'perspective',
  1334.  
  1335. content(reference) {
  1336. const title = reference.getAttribute('title');
  1337. reference.removeAttribute('title');
  1338. return title;
  1339. },
  1340. });
  1341.  
  1342. //photosets
  1343. initPhotosets();
  1344.  
  1345. //notecount shortener
  1346. var $container = $('article');
  1347. $container.find('.notecount').each(function(){
  1348. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1349. if (n > 999) {
  1350. n = Math.floor(n / 100) / 10;
  1351. $(this).text(n + 'k notes');
  1352. }
  1353. });
  1354.  
  1355. // responsive iframes
  1356. $(document).ready(function() {
  1357. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1358. });
  1359.  
  1360. //custom audio player
  1361. customAudio({
  1362. post: "article",
  1363. wrappers: {
  1364. audio: ".custom_audio_wrapper",
  1365. buttons: ".custom_audio_buttons",
  1366. duration: ".custom_audio_duration",
  1367. timeCurrent: ".custom_audio_current_time",
  1368. timeLeft: ".custom_audio_time_left",
  1369. seekbar: ".custom_audio_seekbar"
  1370. },
  1371. default: false,
  1372. pauseAll: true,
  1373. playButton: "<i class='ph-play-fill' id='audio-player-icon'></i>",
  1374. pauseButton: "<i class='ph-pause-fill' id='audio-player-icon'></i>",
  1375. errorIcon: "<i class='ph-x-fill' id='audio-player-icon'></i>",
  1376. hideInfoIfError: true,
  1377. }).create();
  1378.  
  1379. //remove redirects
  1380. function noHrefLi(){
  1381. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1382. Array.prototype.forEach.call(linkSet,function(el,i){
  1383. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1384. linkSet[i].setAttribute("href",theLink);
  1385. });
  1386. }
  1387. noHrefLi();
  1388.  
  1389. </script>
  1390.  
  1391. </body>
  1392. </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!