nicolas-sage

theme 14: katara

Jul 28th, 2022 (edited)
229
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 93.63 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  6. <title>{Title}</title>
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}" />
  9. {/block:Description}
  10. <meta charset="utf-8">
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.  
  13. <!----
  14. _________
  15. / \
  16. | __ __ |
  17. | |__| |__| | KATARA THEME BY SAGE / DEMONTIMES
  18. | | https://demontimes.tumblr.com
  19. | _ _ _ |
  20. |_| |_| |_| |_|
  21.  
  22.  
  23.  
  24. CREDITS:
  25. - phosphor icons / phosphoricons.com
  26. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  27. - bunny fonts / https://fonts.bunny.net/
  28. - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  29. - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  30. - npf images fix by glenthemes / https://glenthemes.tumblr.com/post/659034084446748672/npf-images-v3
  31. - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
  32. - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  33. - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
  34. - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
  35. - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
  36. - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  37. - music player tutorial / https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player / https://www.youtube.com/watch?v=QTHRWGn_sJw
  38.  
  39. ---->
  40.  
  41. <!-- STYLESHEETS -->
  42.  
  43. <!---- PHOTOSET ---->
  44. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  45. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  46. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  47.  
  48. <!--
  49. NPF images fix v3.0 by @glenthemes [2021]
  50. 💌 git.io/JRBt7
  51. --->
  52. <script src="//npf-images-v3.github.io/script.js"></script>
  53. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  54. <style tmblr-npf>
  55. :root {
  56. --NPF-Caption-Spacing:1em;
  57. --NPF-Image-Spacing:4px;
  58. }
  59. </style>
  60.  
  61. <!----- BUNNY FONTS ---->
  62. <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  63.  
  64. <!---- ICONS ---->
  65. <script src="https://unpkg.com/phosphor-icons"></script>
  66. <script src="https://unpkg.com/[email protected]"></script>
  67. <script src="//pull.cappuccicons.com/cpf.js"></script>
  68.  
  69. <!---- TOOLTIPS ---->
  70. <script src="https://unpkg.com/popper.js@1"></script>
  71. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  72.  
  73. <!---- VIDEOS ---->
  74. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  75.  
  76. <!---- COPY LINK ---->
  77. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  78. <script>
  79. $(document).ready(function(){
  80. var clipboard = new ClipboardJS("#copybutton");
  81. });
  82. </script>
  83.  
  84. <!---- TIME AGO ----->
  85. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  86. <script type="text/javascript">
  87. $(document).ready(function() {
  88. $(".time-ago").timeAgo({
  89. time: "short",
  90. spaces: true,
  91. words: false,
  92. prefix: "",
  93. suffix: "ago",
  94. });
  95. });
  96. </script>
  97.  
  98. <!---- VARIABLES ---->
  99.  
  100. <meta name="color:Background" content="#e0e0e0" />
  101. <meta name="color:Posts" content="#eaeaea" />
  102. <meta name="color:Borders" content="#d5d5d5" />
  103. <meta name="color:Title" content="#444" />
  104. <meta name="color:Text" content="#5a5a5a" />
  105. <meta name="color:Link" content="#3b82a6" />
  106. <meta name="color:Accent" content="#4da1c5" />
  107.  
  108. <meta name="color:Night Background" content="#1e1e1e" />
  109. <meta name="color:Night Posts" content="#282828" />
  110. <meta name="color:Night Borders" content="#3a3a3a" />
  111. <meta name="color:Night Title" content="#eee" />
  112. <meta name="color:Night Text" content="#bbb" />
  113. <meta name="color:Night Link" content="#b0eaff" />
  114. <meta name="color:Night Accent" content="#91d7f0" />
  115.  
  116. <meta name="color:Gradient One" content="#5592ac"/>
  117. <meta name="color:Gradient Two" content="#80b8d0"/>
  118. <meta name="color:Gradient Text" content="#fff"/>
  119. <meta name="color:Gradient Accent" content="#c3f2ff"/>
  120.  
  121. <meta name="select:Corners" content="10px" title="round"/>
  122. <meta name="select:Corners" content="5px" title="slightly round"/>
  123. <meta name="select:Corners" content="15px" title="really round"/>
  124. <meta name="select:Corners" content="0px" title="sharp"/>
  125.  
  126. <meta name="select:Glow" content="0 0 10px" title="on"/>
  127. <meta name="select:Glow" content="0 0 0" title="off"/>
  128.  
  129. <meta name="if:Click Tags" content="1"/>
  130. <meta name="if:Music Player" content="1"/>
  131. <meta name="if:Updates" content="1"/>
  132.  
  133. <meta name="text:Post Margin" content="80"/>
  134. <meta name="text:Body Font" content="Urbanist"/>
  135. <meta name="text:Title Font" content="Montserrat Alternates"/>
  136. <meta name="text:Font Size" content="15"/>
  137. <meta name="text:Custom Description" content="custom description"/>
  138.  
  139. <meta name="text:Song Name" content="Song Name"/>
  140. <meta name="text:Song Artist" content="Song Artist"/>
  141. <meta name="text:Song URL" content=""/>
  142. <meta name="text:Song Image URL" content=""/>
  143.  
  144. <meta name="text:Sidebar Link 1" content="link one"/>
  145. <meta name="text:Sidebar Link 1 URL" content="/"/>
  146. <meta name="text:Sidebar Link 2" content="link two"/>
  147. <meta name="text:Sidebar Link 2 URL" content="/"/>
  148. <meta name="text:Sidebar Link 3" content="link three"/>
  149. <meta name="text:Sidebar Link 3 URL" content="/"/>
  150. <meta name="text:Sidebar Link 4" content="link four"/>
  151. <meta name="text:Sidebar Link 4 URL" content="/"/>
  152. <meta name="text:Sidebar Link 5" content="link five"/>
  153. <meta name="text:Sidebar Link 5 URL" content="/"/>
  154. <meta name="text:Sidebar Link 6" content="link six"/>
  155. <meta name="text:Sidebar Link 6 URL" content="/"/>
  156.  
  157. <meta name="text:Update 1" content="watching"/>
  158. <meta name="text:Update 1 Icon" content="television-fill"/>
  159. <meta name="text:Update 2" content="listening to"/>
  160. <meta name="text:Update 2 Icon" content="headphones-fill"/>
  161. <meta name="text:Update 3" content="reading"/>
  162. <meta name="text:Update 3 Icon" content="book-bookmark-fill"/>
  163. <meta name="text:Update 4" content="playing"/>
  164. <meta name="text:Update 4 Icon" content="game-controller-fill"/>
  165. <meta name="text:Update 5" content=""/>
  166. <meta name="text:Update 5 Icon" content=""/>
  167. <meta name="text:Update 6" content=""/>
  168. <meta name="text:Update 6 Icon" content=""/>
  169.  
  170. <!--- day/night --->
  171. <script>
  172. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  173. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  174. </script>
  175.  
  176. <!------- CSS -------->
  177. <style>
  178.  
  179. :root, html[data-theme='light'] {
  180. --LightOn: flex;
  181. --LightOff: none;
  182. --ColorBackground: {color:background};
  183. --ColorPosts: {color:posts};
  184. --ColorTitle: {color:title};
  185. --ColorText: {color:text};
  186. --ColorLink: {color:link};
  187. --ColorAccent: {color:accent};
  188. --ColorBorders: {color:borders};
  189. --ColorGradientOne: {color:gradient one};
  190. --ColorGradientTwo: {color:gradient two};
  191. --ColorGradientText: {color:gradient text};
  192. --ColorGradientAccent: {color:gradient accent};
  193. --ColorOpacity: rgba(255,255,255,.1);
  194. --ColorReverseOpacity: rgba(0,0,0,.1);
  195. }
  196. html[data-theme='dark'] {
  197. --LightOn: none;
  198. --LightOff: flex;
  199. --ColorBackground: {color:night background};
  200. --ColorPosts: {color:night posts};
  201. --ColorTitle: {color:night title};
  202. --ColorText: {color:night text};
  203. --ColorLink: {color:night link};
  204. --ColorAccent: {color:night accent};
  205. --ColorBorders: {color:night borders};
  206. --ColorGradientOne: {color:gradient one};
  207. --ColorGradientTwo: {color:gradient two};
  208. --ColorGradientText: {color:gradient text};
  209. --ColorGradientAccent: {color:gradient accent};
  210. --ColorOpacity: rgba(0,0,0,.1);
  211. --ColorReverseOpacity: rgba(255,255,255,.1);
  212. }
  213. html.theme-transition,
  214. html.theme-transition *,
  215. html.theme-transition *:before,
  216. html.theme-transition *:after {
  217. transition: 0s !important;
  218. transition-delay: 0 !important;
  219. }
  220.  
  221. .light-on{
  222. display: var(--LightOn);
  223. }
  224. .light-off{
  225. display: var(--LightOff);
  226. }
  227.  
  228. /*--- TOOLTIPS ---*/
  229.  
  230. .tippy-tooltip.custom-theme {
  231. font-family:'{text:title font}', sans-serif;
  232. color:var(--ColorTitle);
  233. text-transform:lowercase;
  234. text-align:center;
  235. letter-spacing:.1em;
  236. background:var(--ColorPosts);
  237. border-radius:{select:Corners};
  238. margin-bottom:.5em;
  239. box-shadow:0 0 10px 0 rgba(0,0,0,.2);
  240. }
  241.  
  242. /*--- SCROLLBAR ---*/
  243. ::-webkit-scrollbar {
  244. width:5px;
  245. height:5px;
  246. background:var(--ColorBackground);
  247. }
  248.  
  249. ::-webkit-scrollbar-track {
  250. background:var(--ColorBackground);
  251. border-radius: 5px;
  252. }
  253.  
  254. ::-webkit-scrollbar-thumb {
  255. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  256. border-radius: 5px;
  257. }
  258.  
  259. /*--- TEXT SELECTION ---*/
  260. ::-moz-selection { /* Code for Firefox */
  261. color:var(--ColorPosts);
  262. background:var(--ColorAccent);
  263. }
  264.  
  265. ::selection {
  266. color:var(--ColorPosts);
  267. background:var(--ColorAccent);
  268. }
  269.  
  270. /*--- COMMON ---*/
  271.  
  272. body {
  273. font-family:'{text:body font}', sans-serif;
  274. font-size:{text:font size}px;
  275. color: var(--ColorText);
  276. background-color: var(--ColorBackground);
  277. {block:ifGradientBG}
  278. background-image:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  279. background-attachment:fixed;
  280. {/block:ifGradientBG}
  281. line-height:140%;
  282. word-wrap:break-word;
  283. letter-spacing:.04em;
  284. margin:0;
  285. }
  286. body {
  287. opacity:1;
  288. transition:.75s opacity;
  289. }
  290.  
  291. body.fade-out {
  292. opacity:0;
  293. transition:none;
  294. }
  295. html {background-color:var(--ColorBackground);}
  296.  
  297. a {
  298. color:var(--ColorLink);
  299. text-decoration: none;
  300. -webkit-transition: all 0.4s;
  301. -moz-transition: all 0.4s;
  302. -ms-transition: all 0.4s;
  303. -o-transition: all 0.4s;
  304. transition: all 0.4s;
  305. }
  306.  
  307. a:hover {
  308. color:var(--ColorAccent);
  309. -webkit-transition: all 0.4s;
  310. -moz-transition: all 0.4s;
  311. -ms-transition: all 0.4s;
  312. -o-transition: all 0.4s;
  313. transition: all 0.4s;
  314. }
  315.  
  316. /* LINK EFFECTS */
  317. #hua {
  318. display:inline-block;
  319. position:relative;
  320. }
  321.  
  322. #hua:after {
  323. content: '';
  324. position:absolute;
  325. width:100%;
  326. transform:scaleX(0);
  327. height:2px;
  328. bottom:0;
  329. left:0;
  330. background-color:var(--ColorLink);
  331. transform-origin:center;
  332. transition: transform 0.25s ease-out;
  333. }
  334.  
  335. #hua:hover:after {
  336. transform: scaleX(1);
  337. transform-origin:center;
  338. }
  339.  
  340. .description a, a.read_more, .updates a {
  341. display:inline-block;
  342. position:relative;
  343. border-bottom:2px solid var(--ColorBorders);
  344. }
  345.  
  346. .description a:after, a.read_more:after, .updates a:after {
  347. content: '';
  348. position:absolute;
  349. width:100%;
  350. transform:scaleX(0);
  351. height:2px;
  352. bottom:-2px;
  353. left:0;
  354. background-color:var(--ColorLink);
  355. transform-origin:center;
  356. transition: transform 0.25s ease-out;
  357. }
  358.  
  359. .description a:hover:after, a.read_more:hover:after, .updates a:hover:after {
  360. transform: scaleX(1);
  361. transform-origin:center;
  362. }
  363.  
  364. blockquote {
  365. border-left:1px solid var(--ColorBorders);
  366. padding-left:.75em;
  367. margin-left:1em;
  368. }
  369.  
  370. ul {list-style-type:circle;}
  371. ol {list-style-type: decimal-leading-zero;}
  372. li::marker {color:var(--ColorAccent)}
  373.  
  374. small {font-size:.95em;}
  375. big {font-size:1.1em;}
  376.  
  377. hr {
  378. height:1px;
  379. border:none;
  380. box-shadow:none;
  381. background:var(--ColorBorders);
  382. }
  383.  
  384. pre {
  385. word-wrap:break-word!important;
  386. white-space:pre-wrap;
  387. }
  388.  
  389. b, strong {
  390. color:var(--ColorTitle);
  391. font-weight:800;
  392. }
  393.  
  394. b a:hover {
  395. color:var(--ColorAccent);
  396. }
  397.  
  398. button {font-size:1em;}
  399.  
  400. h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .75em; color:var(--ColorTitle); display:inline-block; width:auto;}
  401. h1 a {border-bottom:2px solid var(--ColorBorders);}
  402. h1 a:hover {color:var(--ColorAccent); border-bottom:2px solid var(--ColorLink);}
  403. h2 {font-size:1.2em; color:var(--ColorTitle); letter-spacing:.1em;}
  404. h3 {font-size:1.15em;}
  405. h4 {font-size:1.1em;}
  406. h5 {font-size:1.05em;}
  407. h1, h1 a, h2 {font-family:'{text:title font}', sans-serif;}
  408.  
  409. /*--- CONTAINERS ---*/
  410.  
  411. main {
  412. width:100%;
  413. display:flex;
  414. justify-content:center;
  415. gap:5em;
  416. }
  417.  
  418. section {
  419. width:540px;
  420. position:relative;
  421. margin-top:4em;
  422. margin-bottom:4em;
  423. }
  424.  
  425. article {
  426. width:100%;
  427. position:relative;
  428. margin:{text:post margin}px auto auto auto;
  429. background:var(--ColorPosts);
  430. border-radius:{select:Corners};
  431. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  432. }
  433.  
  434. article:first-of-type {margin-top:0;}
  435.  
  436. .post-wrap {
  437. background:var(--ColorPosts);
  438. border-radius:{select:Corners};
  439. }
  440.  
  441. /*--- TOP BUTTONS ---*/
  442.  
  443. .topleft {
  444. position:fixed;
  445. left:1em;
  446. top:1em;
  447. display:flex;
  448. flex-direction:column;
  449. gap:1em;
  450. z-index:9999;
  451. }
  452.  
  453. /* DAY/NIGHT */
  454. button#theme-toggle {
  455. outline:none;
  456. border:none;
  457. display:flex;
  458. justify-content:center;
  459. align-items:center;
  460. padding:2px;
  461. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  462. border-radius:100%;
  463. cursor:help;
  464. }
  465.  
  466. button#theme-toggle span {
  467. justify-content:center;
  468. align-items:center;
  469. width:2.35em;
  470. height:2.35em;
  471. background:var(--ColorOpacity);
  472. border-radius:100%;
  473. -webkit-transition: all 0.4s;
  474. -moz-transition: all 0.4s;
  475. -ms-transition: all 0.4s;
  476. -o-transition: all 0.4s;
  477. transition: all 0.4s;
  478. }
  479. button#theme-toggle:hover span {
  480. background:transparent;
  481. -webkit-transition: all 0.4s;
  482. -moz-transition: all 0.4s;
  483. -ms-transition: all 0.4s;
  484. -o-transition: all 0.4s;
  485. transition: all 0.4s;
  486. }
  487.  
  488. button#theme-toggle i {
  489. font-size:1.5em;
  490. color:var(--ColorGradientText);
  491. text-shadow:{select:Glow};
  492. -webkit-transition: all 0.4s;
  493. -moz-transition: all 0.4s;
  494. -ms-transition: all 0.4s;
  495. -o-transition: all 0.4s;
  496. transition: all 0.4s;
  497. }
  498. button#theme-toggle:hover i {
  499. color:var(--ColorGradientAccent);
  500. -webkit-transition: all 0.4s;
  501. -moz-transition: all 0.4s;
  502. -ms-transition: all 0.4s;
  503. -o-transition: all 0.4s;
  504. transition: all 0.4s;
  505. -webkit-animation-duration: .75s;
  506. animation-duration: .75s;
  507. -webkit-animation-fill-mode: both;
  508. animation-fill-mode: both;
  509. -webkit-animation-timing-function: ease-in-out;
  510. animation-timing-function: ease-in-out;
  511. animation-iteration-count:1;
  512. -webkit-animation-iteration-count:1;
  513. animation-name:daynight;
  514. -moz-animation-name:daynight;
  515. }
  516.  
  517. @keyframes daynight {
  518. 50% {
  519. -webkit-transform: scaleX(-1);
  520. -ms-transform: scaleX(-1);
  521. transform: scaleX(-1);
  522. }
  523. }
  524.  
  525. /* MUSIC BUTTON */
  526. .music-container {
  527. position:relative;
  528. display:flex;
  529. align-items:flex-start;
  530. }
  531.  
  532. .music-button {
  533. display:flex;
  534. justify-content:center;
  535. align-items:center;
  536. padding:2px;
  537. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  538. border-radius:100%;
  539. cursor:help;
  540. }
  541. .music-button a {
  542. display:flex;
  543. justify-content:center;
  544. align-items:center;
  545. width:2.35em;
  546. height:2.35em;
  547. background:var(--ColorOpacity);
  548. border-radius:100%;
  549. }
  550. .music-button:hover a {background:transparent;}
  551. .music-container .music-button i {
  552. font-size:1.5em;
  553. color:var(--ColorGradientText);
  554. text-shadow:{select:Glow};
  555. -webkit-transition: all 0.4s;
  556. -moz-transition: all 0.4s;
  557. -ms-transition: all 0.4s;
  558. -o-transition: all 0.4s;
  559. transition: all 0.4s;
  560. -webkit-animation-duration: 1.65s;
  561. animation-duration: 1.65s;
  562. -webkit-animation-fill-mode: both;
  563. animation-fill-mode: both;
  564. -webkit-animation-timing-function: ease-in-out;
  565. animation-timing-function: ease-in-out;
  566. animation-iteration-count:infinite;
  567. -webkit-animation-iteration-count:infinite;
  568. animation-name: music;
  569. -moz-animation-name: music;
  570. animation-play-state:paused;
  571. }
  572.  
  573. .music-container.play .music-button i {
  574. animation-play-state:running;
  575. }
  576.  
  577. @keyframes music {
  578. 0% {
  579. -webkit-transform: scale(1);
  580. -ms-transform: scale(1);
  581. transform: scale(1);
  582. color:var(--ColorGradientText);
  583. }
  584. 25% {
  585. -webkit-transform: scale(.95);
  586. -ms-transform: scale(.95);
  587. transform: scale(.95);
  588. color:var(--ColorGradientAccent);
  589. }
  590. 50% {
  591. -webkit-transform: scale(1.05);
  592. -ms-transform: scale(1.05);
  593. transform: scale(1.05);
  594. color:var(--ColorGradientText);
  595. }
  596. 75% {
  597. -webkit-transform: scale(.95);
  598. -ms-transform: scale(.95);
  599. transform: scale(.95);
  600. color:var(--ColorGradientAccent);
  601. }
  602. 100% {
  603. -webkit-transform: scale(1);
  604. -ms-transform: scale(1);
  605. transform: scale(1);
  606. color:var(--ColorGradientText);
  607. }
  608. }
  609.  
  610. /*- MUSIC PLAYER -*/
  611.  
  612. .audio-container {
  613. position:absolute;
  614. left:100%;
  615. margin-left:1em;
  616. min-width:250px;
  617. display:flex;
  618. flex-direction:column;
  619. align-items:center;
  620. backdrop-filter: blur(2px);
  621. border-radius:{select:Corners};
  622. z-index:9;
  623. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  624. }
  625. .audio-container:after {
  626. content:'';
  627. position:absolute;
  628. left:0;
  629. width:100%;
  630. height:100%;
  631. opacity:.85;
  632. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  633. border-radius:{select:Corners};
  634. z-index:-1;
  635. }
  636.  
  637. .audio-buttons {
  638. width:calc(100% - 1.5em);
  639. display:flex;
  640. justify-content:space-evenly;
  641. align-items:center;
  642. gap:1em;
  643. padding:.5em 1em .5em 1em;
  644. }
  645.  
  646. .audio-buttons i#notbtn {
  647. font-size:1.3em;
  648. color:var(--ColorGradientText);
  649. text-shadow:{select:Glow};
  650. }
  651.  
  652. .action-btn-big {
  653. font-size:1.3em;
  654. color:var(--ColorGradientOne);
  655. display:flex;
  656. justify-content:center;
  657. align-items:center;
  658. padding:.4em;
  659. background:var(--ColorGradientAccent);
  660. border:1px solid var(--ColorGradientAccent);
  661. border-radius:100%;
  662. cursor:pointer;
  663. -webkit-transition: all 0.4s;
  664. -moz-transition: all 0.4s;
  665. -ms-transition: all 0.4s;
  666. -o-transition: all 0.4s;
  667. transition: all 0.4s;
  668. }
  669. .action-btn-big:hover {
  670. text-shadow:{select:Glow};
  671. color:var(--ColorGradientText);
  672. background:var(--ColorOpacity);
  673. border:1px solid var(--ColorOpacity);
  674. -webkit-transition: all 0.4s;
  675. -moz-transition: all 0.4s;
  676. -ms-transition: all 0.4s;
  677. -o-transition: all 0.4s;
  678. transition: all 0.4s;
  679. }
  680.  
  681. .action-btn:focus {outline:0;}
  682.  
  683. .img-container {
  684. width:calc(100% - 2em);
  685. display:flex;
  686. justify-content:flex-start;
  687. align-items:center;
  688. gap:1em;
  689. padding:1em;
  690. background:var(--ColorPosts);
  691. border-radius:{select:Corners};
  692. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  693. }
  694. .img-container img {
  695. width:3em;
  696. height:3em;
  697. border-radius:100%;
  698. object-fit:cover;
  699. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  700. animation:rotate 5s linear infinite;
  701. animation-play-state:paused;
  702. }
  703.  
  704. .music-container.play .img-container img {
  705. animation-play-state:running;
  706. }
  707.  
  708. @keyframes rotate {
  709. from {
  710. transform:rotate(0deg);
  711. }
  712. to {
  713. transform:rotate(360deg);
  714. }
  715. }
  716.  
  717. .music-info {
  718. text-align:left;
  719. }
  720. .music-info #title {
  721. font-size:.95em;
  722. font-weight:700;
  723. font-family:'{text:title font}', sans-serif;
  724. text-align:left;
  725. /* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */
  726. /* Fallback: Set a background color. */
  727. color:var(--ColorTitle);
  728.  
  729. /* Create the gradient. */
  730. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  731.  
  732. /* Set the background size and repeat properties. */
  733. background-size: 100%;
  734. background-repeat: repeat;
  735.  
  736. /* Use the text as a mask for the background. */
  737. /* This will show the gradient as a text color rather than element bg. */
  738. -webkit-background-clip: text;
  739. -webkit-text-fill-color: transparent;
  740. -moz-background-clip: text;
  741. -moz-text-fill-color: transparent;
  742. }
  743. .music-info #artist {font-size:.95em; color:var(--ColorText); text-align:left;}
  744.  
  745. .music-info h4 {margin:0;}
  746.  
  747. /* sidebar button */
  748. .sidebar-button {
  749. display:none;
  750. justify-content:center;
  751. align-items:center;
  752. padding:2px;
  753. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  754. border-radius:100%;
  755. cursor:help;
  756. }
  757. .sidebar-button a {
  758. display:flex;
  759. justify-content:center;
  760. align-items:center;
  761. width:2.35em;
  762. height:2.35em;
  763. background:var(--ColorOpacity);
  764. border-radius:100%;
  765. }
  766. .sidebar-button:hover a {background:transparent;}
  767. .sidebar-button i {
  768. font-size:1.5em;
  769. color:var(--ColorGradientText);
  770. text-shadow:{select:glow};
  771. -webkit-transition: all 0.4s;
  772. -moz-transition: all 0.4s;
  773. -ms-transition: all 0.4s;
  774. -o-transition: all 0.4s;
  775. transition: all 0.4s;
  776. }
  777. .sidebar-button:hover i {
  778. color:var(--ColorGradientAccent);
  779. -webkit-transition: all 0.4s;
  780. -moz-transition: all 0.4s;
  781. -ms-transition: all 0.4s;
  782. -o-transition: all 0.4s;
  783. transition: all 0.4s;
  784. }
  785.  
  786. /*--- HEADER RIGHT ---*/
  787.  
  788. .topright {
  789. position:fixed;
  790. right:1em;
  791. top:1em;
  792. display:flex;
  793. flex-direction:column;
  794. align-items:center;
  795. gap:1em;
  796. z-index:9999;
  797. }
  798.  
  799. /* updates button */
  800. .updates-wrap {
  801. position:relative;
  802. display:flex;
  803. align-items:flex-start;
  804. }
  805.  
  806. .updates-button {
  807. display:flex;
  808. justify-content:center;
  809. align-items:center;
  810. padding:2px;
  811. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  812. border-radius:100%;
  813. cursor:help;
  814. }
  815. .updates-button a {
  816. display:flex;
  817. justify-content:center;
  818. align-items:center;
  819. width:2.35em;
  820. height:2.35em;
  821. background:var(--ColorOpacity);
  822. border-radius:100%;
  823. }
  824. .updates-button:hover a {background:transparent;}
  825. .updates-button i {
  826. font-size:1.5em;
  827. color:var(--ColorGradientText);
  828. text-shadow:{select:glow};
  829. -webkit-transition: all 0.4s;
  830. -moz-transition: all 0.4s;
  831. -ms-transition: all 0.4s;
  832. -o-transition: all 0.4s;
  833. transition: all 0.4s;
  834. }
  835. .updates-button:hover i {
  836. color:var(--ColorGradientAccent);
  837. -webkit-transition: all 0.4s;
  838. -moz-transition: all 0.4s;
  839. -ms-transition: all 0.4s;
  840. -o-transition: all 0.4s;
  841. transition: all 0.4s;
  842. -webkit-animation-duration: 1s;
  843. animation-duration: 1s;
  844. -webkit-animation-fill-mode: both;
  845. animation-fill-mode: both;
  846. -webkit-animation-timing-function: ease-in-out;
  847. animation-timing-function: ease-in-out;
  848. animation-iteration-count:1;
  849. -webkit-animation-iteration-count:1;
  850. animation-name: wiggle;
  851. -moz-animation-name: wiggle;
  852. }
  853.  
  854. @keyframes wiggle {
  855. 0% {
  856. -webkit-transform: translateX(0px);
  857. -ms-transform: translateX(0px);
  858. transform: translateX(0px)
  859. }
  860. 15% {
  861. -webkit-transform: translateX(0px);
  862. -ms-transform: translateX(0px);
  863. transform: translateX(0px)
  864. }
  865. 30% {
  866. -webkit-transform: rotate(10deg);
  867. -ms-transform: translateX(10deg);
  868. transform: translateX(10deg)
  869. }
  870. 45% {
  871. -webkit-transform: rotate(-10deg);
  872. -ms-transform: rotate(-10deg);
  873. transform: rotate(-10deg)
  874. }
  875. 60% {
  876. -webkit-transform: rotate(10deg);
  877. -ms-transform: rotate(10deg);
  878. transform: rotate(10deg)
  879. }
  880. 75% {
  881. -webkit-transform: rotate(-10deg);
  882. -ms-transform: rotate(-10deg);
  883. transform: rotate(-10deg)
  884. }
  885. 85% {
  886. -webkit-transform: rotate(10deg);
  887. -ms-transform: rotate(10deg);
  888. transform: rotate(10deg)
  889. }
  890. 100% {
  891. -webkit-transform: translateX(0px);
  892. -ms-transform: translateX(0px);
  893. transform: translateX(0px)
  894. }
  895. }
  896.  
  897. body.updates-clicked .updates-button i {color:var(--ColorGradientAccent);}
  898.  
  899. /*- updates tab -*/
  900.  
  901. .updates-container {
  902. position:absolute;
  903. right:100%;
  904. margin-right:1em;
  905. width:250px;
  906. display:flex;
  907. flex-direction:column;
  908. align-items:center;
  909. backdrop-filter: blur(2px);
  910. border-radius:{select:Corners};
  911. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  912. z-index:9;
  913. }
  914. .updates-container:after {
  915. content:'';
  916. position:absolute;
  917. top:0;
  918. left:0;
  919. width:100%;
  920. height:100%;
  921. opacity:.85;
  922. background:linear-gradient(to top left, var(--ColorGradientOne), var(--ColorGradientTwo));
  923. border-radius:{select:Corners};
  924. z-index:-1;
  925. }
  926.  
  927. .updates-title {
  928. font-family:'{text:title font}', sans-serif;
  929. font-size:1.1em;
  930. font-weight:700;
  931. color:var(--ColorGradientText);
  932. padding:.5em 1em .5em 1em;
  933. }
  934.  
  935. .updates {
  936. width:calc(100% - 1.5em);
  937. display:flex;
  938. flex-direction:column;
  939. align-items:flex-start;
  940. gap:1em;
  941. padding:.75em;
  942. background:var(--ColorPosts);
  943. border-radius:{select:Corners};
  944. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  945. }
  946.  
  947. .updates li {
  948. display:flex;
  949. justify-content:flex-start;
  950. align-items:flex-start;
  951. gap:.5em;
  952. }
  953.  
  954. .updates i {
  955. font-size:1.3em;
  956. color:var(--ColorAccent);
  957. }
  958.  
  959. .updates span {
  960. text-align:left;
  961. }
  962.  
  963. /* TUMBLR CONTROLS */
  964. #controlsbutton {
  965. display:flex;
  966. justify-content:center;
  967. align-items:center;
  968. padding:2px;
  969. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  970. border-radius:100%;
  971. cursor:help;
  972. }
  973. #controlsbutton a {
  974. display:flex;
  975. justify-content:center;
  976. align-items:center;
  977. width:2.35em;
  978. height:2.35em;
  979. background:var(--ColorOpacity);
  980. border-radius:100%;
  981. }
  982. #controlsbutton:hover a {background:transparent;}
  983. #controlsbutton i {
  984. font-size:1.5em;
  985. color:var(--ColorGradientText);
  986. text-shadow:{select:glow};
  987. -webkit-transition: all 0.4s;
  988. -moz-transition: all 0.4s;
  989. -ms-transition: all 0.4s;
  990. -o-transition: all 0.4s;
  991. transition: all 0.4s;
  992. }
  993. #controlsbutton:hover i {
  994. color:var(--ColorGradientAccent);
  995. -webkit-transition: all 0.4s;
  996. -moz-transition: all 0.4s;
  997. -ms-transition: all 0.4s;
  998. -o-transition: all 0.4s;
  999. transition: all 0.4s;
  1000. -webkit-animation-duration: 1.5s;
  1001. animation-duration: 1.5s;
  1002. -webkit-animation-fill-mode: both;
  1003. animation-fill-mode: both;
  1004. -webkit-animation-timing-function: ease-in-out;
  1005. animation-timing-function: ease-in-out;
  1006. animation-iteration-count:1;
  1007. -webkit-animation-iteration-count:1;
  1008. animation-name:tumblrcontrols;
  1009. -moz-animation-name:tumblrcontrols;
  1010. }
  1011.  
  1012. @keyframes tumblrcontrols {
  1013. 45% {
  1014. -webkit-transform: rotate(180deg);
  1015. -ms-transform: rotate(180deg);
  1016. transform: rotate(180deg);
  1017. }
  1018. 55% {
  1019. -webkit-transform: rotate(180deg);
  1020. -ms-transform: rotate(180deg);
  1021. transform: rotate(180deg);
  1022. }
  1023. 100% {
  1024. -webkit-transform: rotate(360deg);
  1025. -ms-transform: rotate(360deg);
  1026. transform: rotate(360deg);
  1027. }
  1028. }
  1029.  
  1030. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  1031. z-index:999999999!important;
  1032. margin-top:.5em;
  1033. margin-right:3.5em;
  1034. transform:scale(.9);
  1035. opacity:0;
  1036. visibility:hidden;
  1037. }
  1038.  
  1039. body.controlsclick iframe.tmblr-iframe {
  1040. opacity:1.0;
  1041. visibility:visible;
  1042. -webkit-transition: all 0.5s;
  1043. -moz-transition: all 0.5s;
  1044. -ms-transition: all 0.5s;
  1045. -o-transition: all 0.5s;
  1046. transition: all 0.5s;
  1047. }
  1048. body.controlsclick #controlsbutton i {color:var(--ColorGradientAccent);}
  1049.  
  1050. /*---- SIDEBAR ----*/
  1051.  
  1052. aside {width:350px;}
  1053. #sidebar {
  1054. position:fixed;
  1055. margin-top:4em;
  1056. width:350px;
  1057. display:flex;
  1058. flex-direction:column;
  1059. align-items:center;
  1060. background:var(--ColorPosts);
  1061. border-radius:{select:Corners};
  1062. box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
  1063. z-index:999;
  1064. }
  1065.  
  1066. .sidebar-wrap {
  1067. position:relative;
  1068. width:100%;
  1069. display:flex;
  1070. flex-direction:column;
  1071. }
  1072.  
  1073. #sidebar svg {
  1074. display: inline-block;
  1075. position: absolute;
  1076. top: 0;
  1077. left: 0;
  1078. }
  1079. #sidebar .svg-container {
  1080. display: inline-block;
  1081. position:absolute;
  1082. width:100%;
  1083. padding-bottom: 100%;
  1084. vertical-align: middle;
  1085. overflow: hidden;
  1086. opacity:.85;
  1087. border-radius:{select:Corners};
  1088. }
  1089.  
  1090. .title {
  1091. position:relative;
  1092. width:calc(100% - 1.5em);
  1093. display:flex;
  1094. flex-direction:column;
  1095. align-items:center;
  1096. gap:1em;
  1097. padding:.75em;
  1098. border-bottom:1px solid var(--ColorBorders);
  1099. }
  1100.  
  1101. .title img {
  1102. width:4.5em;
  1103. height:4.5em;
  1104. border-radius:100%;
  1105. padding:2px;
  1106. background:var(--ColorGradientTwo);
  1107. }
  1108.  
  1109. .title a {
  1110. display:flex;
  1111. flex-direction:column;
  1112. align-items:center;
  1113. }
  1114. .title b {
  1115. font-family:'{text:title font}', sans-serif;
  1116. font-size:1.3em;
  1117. font-weight:bold;
  1118. color:var(--ColorTitle);
  1119. letter-spacing:.1em;
  1120. text-align:center;
  1121. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1122. background-size: 100%;
  1123. background-repeat:repeat;
  1124. -webkit-background-clip: text;
  1125. -webkit-text-fill-color:transparent;
  1126. -moz-background-clip:text;
  1127. -moz-text-fill-color:transparent;
  1128. -webkit-transition: all 0.4s;
  1129. -moz-transition: all 0.4s;
  1130. -ms-transition: all 0.4s;
  1131. -o-transition: all 0.4s;
  1132. transition: all 0.4s;
  1133. }
  1134. .title a:hover b {
  1135. color:var(--ColorAccent);
  1136. -webkit-transition: all 0.4s;
  1137. -moz-transition: all 0.4s;
  1138. -ms-transition: all 0.4s;
  1139. -o-transition: all 0.4s;
  1140. transition: all 0.4s;
  1141. }
  1142. .title i {
  1143. font-style:normal;
  1144. color:var(--ColorText);
  1145. text-align:center;
  1146. -webkit-transition: all 0.4s;
  1147. -moz-transition: all 0.4s;
  1148. -ms-transition: all 0.4s;
  1149. -o-transition: all 0.4s;
  1150. transition: all 0.4s;
  1151. }
  1152. .title a:hover i {
  1153. color:var(--ColorTitle);
  1154. -webkit-transition: all 0.4s;
  1155. -moz-transition: all 0.4s;
  1156. -ms-transition: all 0.4s;
  1157. -o-transition: all 0.4s;
  1158. transition: all 0.4s;
  1159. }
  1160.  
  1161. .description {
  1162. width:calc(100% - 1.5em);
  1163. text-align:center;
  1164. padding:.75em .75em 1em .75em;
  1165. background:var(--ColorPosts);
  1166. border-radius:0 0 {select:Corners} {select:Corners};
  1167. z-index:1;
  1168. }
  1169. .description p {margin-bottom:0; padding-bottom:0;}
  1170.  
  1171. .sidebar-bottom {
  1172. position:relative;
  1173. display:flex;
  1174. justify-content:space-evenly;
  1175. align-items:center;
  1176. gap:.5em;
  1177. margin-top:-.75em;
  1178. padding:1.25em 1em .5em 1em;
  1179. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1180. border-radius:0 0 {select:Corners} {select:Corners};
  1181. }
  1182. body.nav-clicked .sidebar-bottom {border-radius:0 0 0 0;}
  1183.  
  1184. .sb-nav, .sb-search {cursor:help; display:flex; justify-content:center; align-items:center;}
  1185. .sb-link {display:flex; justify-content:center; align-items:center;}
  1186. .sb-nav i, .sb-link i, .sb-search i {
  1187. font-size:1.5em;
  1188. color:var(--ColorGradientText);
  1189. -webkit-transition: all 0.4s;
  1190. -moz-transition: all 0.4s;
  1191. -ms-transition: all 0.4s;
  1192. -o-transition: all 0.4s;
  1193. transition: all 0.4s;
  1194. }
  1195. .sb-nav i:hover, a.sb-link:hover i, .sb-search i:hover {
  1196. color:var(--ColorGradientAccent);
  1197. text-shadow:{select:Glow};
  1198. -webkit-transition: all 0.4s;
  1199. -moz-transition: all 0.4s;
  1200. -ms-transition: all 0.4s;
  1201. -o-transition: all 0.4s;
  1202. transition: all 0.4s;
  1203. }
  1204.  
  1205. body.nav-clicked .sb-nav i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
  1206. body.search-clicked .sb-search i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
  1207.  
  1208. /* NAVIGATE */
  1209.  
  1210. nav {
  1211. position:relative;
  1212. display:flex;
  1213. justify-content:flex-start;
  1214. align-items:flex-start;
  1215. flex-wrap:wrap;
  1216. gap:.5em;
  1217. width:calc(100% - 2em);
  1218. padding:1em;
  1219. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1220. border-radius:0 0 {select:Corners} {select:Corners};
  1221. border-top:1px solid var(--ColorOpacity);
  1222. z-index:9;
  1223. }
  1224.  
  1225. nav a {
  1226. min-width:calc(33% - .5em);
  1227. display:flex;
  1228. justify-content:flex-start;
  1229. align-items:center;
  1230. gap:.25em;
  1231. }
  1232.  
  1233. nav i {
  1234. font-size:1.2em;
  1235. color:var(--ColorGradientAccent);
  1236. text-shadow:{select:Glow};
  1237. -webkit-transition: all 0.4s;
  1238. -moz-transition: all 0.4s;
  1239. -ms-transition: all 0.4s;
  1240. -o-transition: all 0.4s;
  1241. transition: all 0.4s;
  1242. }
  1243. nav a:hover i {
  1244. color:var(--ColorGradientText);
  1245. -webkit-transition: all 0.4s;
  1246. -moz-transition: all 0.4s;
  1247. -ms-transition: all 0.4s;
  1248. -o-transition: all 0.4s;
  1249. transition: all 0.4s;
  1250. }
  1251.  
  1252. nav a span {
  1253. color:var(--ColorGradientText);
  1254. text-align:left;
  1255. -webkit-transition: all 0.4s;
  1256. -moz-transition: all 0.4s;
  1257. -ms-transition: all 0.4s;
  1258. -o-transition: all 0.4s;
  1259. transition: all 0.4s;
  1260. }
  1261. nav a:hover span {
  1262. color:var(--ColorGradientAccent);
  1263. -webkit-transition: all 0.4s;
  1264. -moz-transition: all 0.4s;
  1265. -ms-transition: all 0.4s;
  1266. -o-transition: all 0.4s;
  1267. transition: all 0.4s;
  1268. }
  1269.  
  1270. /* SEARCH BAR */
  1271. .sb-search {
  1272. display:flex;
  1273. justify-content:flex-start;
  1274. align-items:center;
  1275. gap:.5em;
  1276. }
  1277. body.search-clicked .sb-search {
  1278. position:absolute;
  1279. left:0;
  1280. width:calc(100% - 2em);
  1281. padding:.5em 1em .5em 1em;
  1282. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1283. border-radius:0 0 {select:Corners} {select:Corners};
  1284. }
  1285. body.nav-clicked.search-clicked .sb-search {border-radius:0 0 0 0;}
  1286.  
  1287. .search .query {
  1288. border: 0;
  1289. outline: 0;
  1290. font-family:'{text:title font}', sans-serif;
  1291. font-size:.9em;
  1292. width:100%;
  1293. color:var(--ColorGradientText);
  1294. letter-spacing:.1em;
  1295. background:transparent;
  1296. }
  1297.  
  1298. ::-webkit-input-placeholder {color: inherit; opacity:.75;}
  1299. :-moz-placeholder {color: inherit; opacity:.75;}
  1300. ::-moz-placeholder {color: inherit; opacity:.75;}
  1301. :-ms-input-placeholder {color: inherit; opacity:.75;}
  1302.  
  1303. input:focus::-webkit-input-placeholder {color: transparent;}
  1304. input:focus:-moz-placeholder {color: transparent;}
  1305. input:focus::-moz-placeholder {color: transparent;}
  1306. input:focus:-ms-input-placeholder { color: transparent;}
  1307.  
  1308. /*---- TOP POST INFO ---*/
  1309.  
  1310. .topinfo {
  1311. margin-bottom:-1em;
  1312. width:calc(100% - 2em);
  1313. display:flex;
  1314. justify-content:space-between;
  1315. align-items:center;
  1316. gap:.5em;
  1317. padding:.75em 1em 1.75em 1em;
  1318. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1319. border-radius:{select:Corners} {select:Corners} 0 0;
  1320. }
  1321.  
  1322. /* top info left */
  1323. .topinfo-left {
  1324. display:flex;
  1325. justify-content:flex-end;
  1326. align-items:center;
  1327. gap:1em;
  1328. }
  1329.  
  1330. .topinfo-img {
  1331. width:2.35em;
  1332. height:2.35em;
  1333. display:flex;
  1334. justify-content:center;
  1335. align-items:center;
  1336. padding:2px;
  1337. background:var(--ColorGradientAccent);
  1338. border-radius:100%;
  1339. -webkit-transition: all 0.4s;
  1340. -moz-transition: all 0.4s;
  1341. -ms-transition: all 0.4s;
  1342. -o-transition: all 0.4s;
  1343. transition: all 0.4s;
  1344. }
  1345. .topinfo-img img {
  1346. width:2.35em;
  1347. height:2.35em;
  1348. border-radius:100%;
  1349. }
  1350. .topinfo-img:hover {
  1351. transform:scale(1.1);
  1352. -webkit-transition: all 0.4s;
  1353. -moz-transition: all 0.4s;
  1354. -ms-transition: all 0.4s;
  1355. -o-transition: all 0.4s;
  1356. transition: all 0.4s;
  1357. }
  1358.  
  1359. .topinfo-textwrap {
  1360. display:flex;
  1361. flex-direction:column;
  1362. }
  1363.  
  1364. .ti-name {
  1365. font-size:.95em;
  1366. color:var(--ColorGradientText);
  1367. text-align:left;
  1368. }
  1369. .ti-name span {opacity:.95;}
  1370. .ti-name a {
  1371. font-family:'{text:title font}', sans-serif;
  1372. font-weight:600;
  1373. color:var(--ColorGradientText);
  1374. border-bottom:1px solid transparent;
  1375. -webkit-transition: all 0.2s;
  1376. -moz-transition: all 0.2s;
  1377. -ms-transition: all 0.2s;
  1378. -o-transition: all 0.2s;
  1379. transition: all 0.2s;
  1380. }
  1381. .ti-name a:hover {
  1382. color:var(--ColorGradientAccent);
  1383. -webkit-transition: all 0.2s;
  1384. -moz-transition: all 0.2s;
  1385. -ms-transition: all 0.2s;
  1386. -o-transition: all 0.2s;
  1387. transition: all 0.2s;
  1388. }
  1389.  
  1390. .ti-text {
  1391. display:flex;
  1392. justify-content:flex-start;
  1393. align-items:center;
  1394. gap:.5em;
  1395. }
  1396.  
  1397. .ti-text b {
  1398. font-weight:normal;
  1399. font-size:.95em;
  1400. color:var(--ColorGradientText);
  1401. letter-spacing:.075em;
  1402. text-align:left;
  1403. opacity:.95;
  1404. }
  1405. .ti-text span {
  1406. font-size:.5em;
  1407. color:var(--ColorGradientAccent);
  1408. }
  1409.  
  1410. /* top info right */
  1411. .topinfo-right {
  1412. display:flex;
  1413. justify-content:flex-end;
  1414. align-items:center;
  1415. }
  1416.  
  1417. .topinfo-right a {
  1418. position:relative;
  1419. display:flex;
  1420. justify-content:center;
  1421. align-items:center;
  1422. }
  1423. .topinfo-right i {
  1424. font-size:1.6em;
  1425. color:var(--ColorGradientText);
  1426. -webkit-transition: all 0.4s;
  1427. -moz-transition: all 0.4s;
  1428. -ms-transition: all 0.4s;
  1429. -o-transition: all 0.4s;
  1430. transition: all 0.4s;
  1431. }
  1432. .topinfo-right a:hover i {
  1433. color:var(--ColorGradientAccent);
  1434. -webkit-transition: all 0.4s;
  1435. -moz-transition: all 0.4s;
  1436. -ms-transition: all 0.4s;
  1437. -o-transition: all 0.4s;
  1438. transition: all 0.4s;
  1439. }
  1440.  
  1441. /*--- POSTS ----*/
  1442.  
  1443. .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%;}
  1444.  
  1445. article img {display:block; margin:auto; max-width:100%;}
  1446.  
  1447. .caption {
  1448. padding:1em;
  1449. }
  1450.  
  1451. .caption a {
  1452. position:relative;
  1453. border-bottom:2px solid var(--ColorBorders);
  1454. }
  1455.  
  1456. .caption a:hover {border-bottom:2px solid var(--ColorLink);}
  1457.  
  1458. .userlink {
  1459. display:inline-block;
  1460. }
  1461. .userlink a {
  1462. display:flex;
  1463. justify-content:flex-start;
  1464. align-items:center;
  1465. gap:.5em;
  1466. border-bottom:0;
  1467. }
  1468. .userlink a:hover {border-bottom:0;}
  1469. .usericon {
  1470. width:1.5em;
  1471. height:1.5em;
  1472. padding:2px;
  1473. background:var(--ColorAccent);
  1474. border-radius:100%;
  1475. }
  1476. .usericon img {
  1477. width:1.5em;
  1478. height:1.5em;
  1479. border-radius:100%;
  1480. -webkit-transition: all 0.4s;
  1481. -moz-transition: all 0.4s;
  1482. -ms-transition: all 0.4s;
  1483. -o-transition: all 0.4s;
  1484. transition: all 0.4s;
  1485. }
  1486. .userlink a:hover .usericon img {
  1487. transform:rotate(15deg);
  1488. -webkit-transition: all 0.4s;
  1489. -moz-transition: all 0.4s;
  1490. -ms-transition: all 0.4s;
  1491. -o-transition: all 0.4s;
  1492. transition: all 0.4s;
  1493. }
  1494. .username {
  1495. font-weight:600;
  1496. font-size:.95em;
  1497. color:var(--ColorTitle);
  1498. letter-spacing:.1em;
  1499. border-bottom:2px solid var(--ColorBorders);
  1500. -webkit-transition: all 0.4s;
  1501. -moz-transition: all 0.4s;
  1502. -ms-transition: all 0.4s;
  1503. -o-transition: all 0.4s;
  1504. transition: all 0.4s;
  1505. }
  1506. .userlink a:hover .username {
  1507. border-bottom:2px solid var(--ColorAccent);
  1508. -webkit-transition: all 0.4s;
  1509. -moz-transition: all 0.4s;
  1510. -ms-transition: all 0.4s;
  1511. -o-transition: all 0.4s;
  1512. transition: all 0.4s;
  1513. }
  1514.  
  1515. .userlink.deactive .username {
  1516. color:var(--ColorText);
  1517. opacity:.85;
  1518. }
  1519.  
  1520. a.read_more {
  1521. text-transform:uppercase;
  1522. letter-spacing:1px;
  1523. font-weight:bold;
  1524. color: var(--ColorTitle);
  1525. }
  1526. a.read_more:hover {color:var(--ColorAccent);}
  1527.  
  1528. /*--- PHOTO POSTS ----*/
  1529.  
  1530. .photopost {width:calc(100% - 2em); padding:1em;}
  1531. .photopost .caption {padding:.5em 0 .5em 0;}
  1532.  
  1533. img.photos {width:100%;}
  1534.  
  1535. .vignette, #vignette {opacity:0;}
  1536. .tmblr-lightbox, #tumblr_lightbox {
  1537. backdrop-filter: blur(2px);
  1538. background-color:rgba(0,0,0,.2) !important;
  1539. z-index:9999999;
  1540. }
  1541. .lightbox-image, #tumblr_lightbox img {
  1542. box-shadow: none !important;
  1543. }
  1544. #tumblr_lightbox_caption, .lightbox-caption {
  1545. color: #fff !important;
  1546. font-family: inherit;
  1547. margin-top: 1em !important;
  1548. z-index:9999999;
  1549. }
  1550.  
  1551. /*--- LINK POSTS ---*/
  1552.  
  1553. .linkpost {
  1554. position:relative;
  1555. width:calc(100% - 2em);
  1556. padding:1em;
  1557. }
  1558.  
  1559. .linkpost a {
  1560. display:flex;
  1561. flex-direction:column;
  1562. align-items:center;
  1563. }
  1564.  
  1565. .linkimage {
  1566. position:relative;
  1567. width:100%;
  1568. height:200px;
  1569. z-index:9;
  1570. }
  1571. .linkimage img {
  1572. width:100%;
  1573. height:200px;
  1574. object-fit:cover;
  1575. border-radius:{select:Corners} {select:Corners} 0 0;
  1576. }
  1577. .linkimage-overlay {
  1578. position:absolute;
  1579. top:0;
  1580. width:100%;
  1581. height:200px;
  1582. display:flex;
  1583. justify-content:center;
  1584. align-items:center;
  1585. font-family:'{text:title font}', sans-serif;
  1586. font-size:1.4em;
  1587. font-weight:bold;
  1588. color:var(--ColorGradientText);
  1589. letter-spacing:.1em;
  1590. backdrop-filter:blur(3px);
  1591. border-radius:{select:Corners} {select:Corners} 0 0;
  1592. z-index:9;
  1593. }
  1594. .linkimage:after {
  1595. content:'';
  1596. position:absolute;
  1597. top:0;
  1598. width:100%;
  1599. height:200px;
  1600. opacity:.75;
  1601. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1602. border-radius:{select:Corners} {select:Corners} 0 0;
  1603. z-index:1;
  1604. }
  1605.  
  1606. .link {
  1607. width:calc(100% - 2em);
  1608. padding:1em;
  1609. background:var(--ColorReverseOpacity);
  1610. border-radius:{select:Corners};
  1611. display:flex;
  1612. justify-content:flex-start;
  1613. align-items:center;
  1614. gap:1em;
  1615. }
  1616. .link#thumbnail {border-radius:0 0 {select:Corners} {select:Corners};}
  1617.  
  1618. .linkicon i {
  1619. font-size:1.8em;
  1620. color:var(--ColorGradientText);
  1621. text-shadow:{select:glow};
  1622. margin-left:.5em;
  1623. padding:.4em;
  1624. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1625. border-radius:100%;
  1626. -webkit-transition: all 0.4s;
  1627. -moz-transition: all 0.4s;
  1628. -ms-transition: all 0.4s;
  1629. -o-transition: all 0.4s;
  1630. transition: all 0.4s;
  1631. }
  1632.  
  1633. .linkpost a:hover .linkicon i {
  1634. color:var(--ColorGradientAccent);
  1635. transform:scale(.95);
  1636. -webkit-transition: all 0.4s;
  1637. -moz-transition: all 0.4s;
  1638. -ms-transition: all 0.4s;
  1639. -o-transition: all 0.4s;
  1640. transition: all 0.4s;
  1641. }
  1642.  
  1643. .linktitle {
  1644. display:flex;
  1645. flex-direction:column;
  1646. }
  1647.  
  1648. .linktitle b {
  1649. font-family:'{text:title font}', sans-serif;
  1650. font-size:1.1em;
  1651. }
  1652.  
  1653. .linktitle span {
  1654. font-size:.9em;
  1655. color:var(--ColorText);
  1656. }
  1657.  
  1658. /*--- AUDIO POSTS ---*/
  1659.  
  1660. .audiopost {
  1661. position:relative;
  1662. width:calc(100% - 2em);
  1663. padding:1em;
  1664. display:flex;
  1665. justify-content:center;
  1666. align-items:center;
  1667. z-index:9;
  1668. }
  1669.  
  1670. .audiopost iframe {
  1671. width:100%;
  1672. }
  1673.  
  1674. .audio {
  1675. position:relative;
  1676. width:100%;
  1677. display:flex;
  1678. flex-direction:column;
  1679. align-items:center;
  1680. background:var(--ColorReverseOpacity);
  1681. border-radius:{select:Corners};
  1682. }
  1683.  
  1684. .audiowrap {
  1685. width:calc(100% - 2em);
  1686. display:flex;
  1687. flex-direction:column;
  1688. align-items:center;
  1689. gap:1em;
  1690. padding:1em;
  1691. }
  1692.  
  1693. .albumart-circle {
  1694. width:100px;
  1695. height:100px;
  1696. }
  1697. .albumart-circle img {
  1698. width:100px;
  1699. height:100px;
  1700. border-radius:100%;
  1701. padding:2px;
  1702. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1703. }
  1704.  
  1705. .audiotitle {
  1706. display:flex;
  1707. flex-direction:column;
  1708. align-items:center;
  1709. }
  1710.  
  1711. .audiotitle b {
  1712. font-family:'{text:title font}', sans-serif;
  1713. letter-spacing:.1em;
  1714. color:var(--ColorTitle);
  1715. text-align:center;
  1716. }
  1717.  
  1718. .audiotitle span {
  1719. text-align:center;
  1720. }
  1721.  
  1722. .audiobuttons {
  1723. width:calc(100% - 2em);
  1724. display:flex;
  1725. justify-content:space-evenly;
  1726. align-items:center;
  1727. gap:1em;
  1728. padding:1em;
  1729. background:var(--ColorOpacity);
  1730. border-radius:0 0 {select:Corners} {select:Corners};
  1731. }
  1732.  
  1733. .audiobuttons i {
  1734. font-size:1.6em;
  1735. color:var(--ColorAccent);
  1736. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1737. background-size: 100%;
  1738. background-repeat:repeat;
  1739. -webkit-background-clip: text;
  1740. -webkit-text-fill-color:transparent;
  1741. -moz-background-clip:text;
  1742. -moz-text-fill-color:transparent;
  1743. }
  1744.  
  1745. .audioplaybg {
  1746. display:flex;
  1747. justify-content:center;
  1748. align-items:center;
  1749. padding:2px;
  1750. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1751. border-radius:100%;
  1752. box-shadow:2px 8px 8px rgba(0,0,0,.1);
  1753. }
  1754.  
  1755. .audioplay {
  1756. width: 30px;
  1757. height: 30px;
  1758. overflow: hidden;
  1759. position: relative;
  1760. padding:8px 8px 5px 5px;
  1761. background:#f2f2f2;
  1762. border-radius:100%;
  1763. z-index:1;
  1764. }
  1765.  
  1766. /*--- QUOTE POSTS ----*/
  1767.  
  1768. .quotepost {
  1769. width:calc(100% - 2em);
  1770. padding:1em;
  1771. }
  1772.  
  1773. .quote {
  1774. padding:.5em;
  1775. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1776. border-radius:{select:Corners};
  1777. }
  1778.  
  1779. .quotewrap {
  1780. padding:.5em;
  1781. border-radius:{select:Corners};
  1782. background:var(--ColorOpacity);
  1783. border:1px solid var(--ColorOpacity);
  1784. }
  1785.  
  1786. .quote i {
  1787. transform:rotate(180deg);
  1788. font-size:1.4em;
  1789. color:var(--ColorGradientAccent);
  1790. margin-right:1em;
  1791. }
  1792.  
  1793. .quote span {
  1794. font-family:'{text:title font}', sans-serif;
  1795. color:var(--ColorGradientText);
  1796. font-size:1.2em;
  1797. letter-spacing:.2em;
  1798. font-weight:bold;
  1799. text-align:left;
  1800. }
  1801.  
  1802. .source {
  1803. text-align:center;
  1804. padding:.5em .5em 0 .5em;
  1805. color:var(--ColorGradientAccent);
  1806. letter-spacing:.1em;
  1807. }
  1808.  
  1809. /*--- ANSWER POSTS ---*/
  1810.  
  1811. .askwrap {
  1812. width:calc(100% - 2em);
  1813. padding:1em 1em .5em 1em;
  1814. }
  1815.  
  1816. .askicon {
  1817. width:2.2em;
  1818. height:2.2em;
  1819. padding:2px;
  1820. border-radius:100%;
  1821. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1822. }
  1823.  
  1824. .askicon img {
  1825. width:2.2em;
  1826. height:2.2em;
  1827. border-radius:100%;
  1828. }
  1829.  
  1830. .asker {
  1831. display:flex;
  1832. justify-content:flex-end;
  1833. align-items:center;
  1834. gap:.5em;
  1835. margin-bottom:1em;
  1836. }
  1837.  
  1838. .asker .askerstart {
  1839. display:flex;
  1840. flex-direction:column;
  1841. align-items:flex-end;
  1842. text-align:right;
  1843. line-height:120%;
  1844. }
  1845.  
  1846. .askerstart b {
  1847. font-family:'{text:title font}', sans-serif;
  1848. text-transform:lowercase;
  1849. letter-spacing:.05em;
  1850. font-weight:600;
  1851. }
  1852.  
  1853. .askerstart a {
  1854. font-family:'{text:title font}', sans-serif;
  1855. margin-right:0;
  1856. margin-bottom:0;
  1857. }
  1858.  
  1859. .askerstart span {
  1860. font-size:.9em;
  1861. }
  1862.  
  1863. .askmessage {
  1864. margin-left:2.5em;
  1865. margin-top:-.5em;
  1866. }
  1867.  
  1868. .question {
  1869. position:relative;
  1870. padding:.5em 1em .5em 1em;
  1871. margin-right:2em;
  1872. text-align:right;
  1873. color:var(--ColorGradientText);
  1874. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1875. border-radius:{select:Corners};
  1876. }
  1877. .question .blurb {
  1878. position:absolute;
  1879. right:-.5em;
  1880. top:-.8em;
  1881. transform:rotate(-145deg);
  1882. width:0;
  1883. height:0;
  1884. border-left:.8em solid transparent;
  1885. border-right:.8em solid transparent;
  1886. border-top:1.8em solid var(--ColorGradientTwo);
  1887. }
  1888.  
  1889. .answerwrap {
  1890. width:calc(100% - 2em);
  1891. padding:.5em 1em 1em 1em;
  1892. }
  1893.  
  1894. .answerer .usericon {
  1895. width:2.2em;
  1896. height:2.2em;
  1897. display:flex;
  1898. justify-content:center;
  1899. align-items:center;
  1900. padding:2px;
  1901. border-radius:100%;
  1902. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1903. }
  1904.  
  1905. .answerer .usericon img {
  1906. width:2.2em;
  1907. height:2.2em;
  1908. border:none;
  1909. padding:0;
  1910. }
  1911.  
  1912. .answerer {
  1913. display:flex;
  1914. align-items:center;
  1915. gap:.5em;
  1916. line-height:120%;
  1917. }
  1918.  
  1919. .answerer .username {
  1920. font-family:'{text:title font}', sans-serif;
  1921. text-transform:lowercase;
  1922. letter-spacing:.05em;
  1923. font-weight:600;
  1924. border-bottom:0;
  1925. }
  1926.  
  1927. .answermsg {
  1928. font-size:.9em;
  1929. }
  1930.  
  1931. .answer {
  1932. position:relative;
  1933. margin-top:1em;
  1934. margin-left:2em;
  1935. padding:.5em 1em .5em 1em;
  1936. background:var(--ColorBackground);
  1937. border-radius:{select:Corners};
  1938. }
  1939.  
  1940. .answer .blurb {
  1941. position:absolute;
  1942. left:-.5em;
  1943. top:-.8em;
  1944. transform:rotate(145deg);
  1945. width:0;
  1946. height:0;
  1947. border-left:.8em solid transparent;
  1948. border-right:.8em solid transparent;
  1949. border-top:1.8em solid var(--ColorBackground);
  1950. }
  1951.  
  1952. .question a, .answer a {
  1953. display:inline-block;
  1954. position:relative;
  1955. }
  1956.  
  1957. .question a:after, .answer a:after {
  1958. content: '';
  1959. position:absolute;
  1960. width:100%;
  1961. transform:scaleX(0);
  1962. height:2px;
  1963. bottom:-2px;
  1964. left:0;
  1965. transform-origin:middle;
  1966. transition: transform 0.25s ease-out;
  1967. }
  1968.  
  1969. .question a:hover:after, .answer a:hover:after {
  1970. transform: scaleX(1);
  1971. transform-origin: middle;
  1972. }
  1973.  
  1974. .question a {color:var(--ColorGradientText);border-bottom:2px solid var(--ColorOpacity);}
  1975. .question a:after {background-color:var(--ColorGradientAccent);}
  1976. .question b {color:var(--ColorGradientText);}
  1977.  
  1978. /*--- CHAT POSTS ---*/
  1979.  
  1980. .chat {width:calc(100% - 2em); margin:0; padding:1em;}
  1981.  
  1982. .chat li {
  1983. position:relative;
  1984. list-style:none;
  1985. padding:1em 2em 1em 2em;
  1986. margin:.5em 0 .5em 0;
  1987. border-radius:{select:Corners};
  1988. }
  1989.  
  1990. .chat li:last-of-type {margin-bottom:0;}
  1991. .chat li:nth-of-type(odd) {
  1992. color:var(--ColorGradientText);
  1993. background:var(--ColorGradientOne);
  1994. }
  1995. .chat li:nth-of-type(odd) .blurb {
  1996. position:absolute;
  1997. top:1.2em;
  1998. left:-.4em;
  1999. margin-top:-.5em;
  2000. transform:rotate(45deg);
  2001. width:2em;
  2002. height:2em;
  2003. background:var(--ColorGradientOne);
  2004. }
  2005.  
  2006. .chat li:nth-of-type(even) {
  2007. background:var(--ColorGradientTwo);
  2008. color:var(--ColorGradientText);
  2009. text-align:right;
  2010. }
  2011. .chat li:nth-of-type(even) .blurb {
  2012. position:absolute;
  2013. top:1.2em;
  2014. right:-.4em;
  2015. margin-top:-.5em;
  2016. transform:rotate(45deg);
  2017. width:2em;
  2018. height:2em;
  2019. background:var(--ColorGradientTwo);
  2020. }
  2021. .chatter:nth-of-type(even) {text-align:right;}
  2022.  
  2023. .chatter {
  2024. font-family:'{text:title font}', sans-serif;
  2025. color:var(--ColorTitle);
  2026. font-weight:600;
  2027. letter-spacing:.1em;
  2028. }
  2029.  
  2030. /*--- BOTTOM POST INFO ---*/
  2031.  
  2032. .bottominfo-wrap {
  2033. width:100%;
  2034. display:flex;
  2035. flex-direction:column;
  2036. }
  2037.  
  2038. .bottominfo {
  2039. position:relative;
  2040. width:calc(100% - 2em);
  2041. display:flex;
  2042. justify-content:space-between;
  2043. align-items:center;
  2044. gap:.5em;
  2045. margin-top:-.75em;
  2046. padding:1.25em 1em .5em 1em;
  2047. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2048. border-radius:0 0 {select:Corners} {select:Corners};
  2049. }
  2050.  
  2051. {block:ifClickTags}
  2052. .bottominfo:after {
  2053. position:absolute;
  2054. content:'';
  2055. top:-.25em;
  2056. left:0;
  2057. width:100%;
  2058. height:1em;
  2059. background:var(--ColorPosts);
  2060. border-radius:0 0 {select:Corners} {select:Corners};
  2061. }
  2062.  
  2063. .bottominfo.tags-clicked {
  2064. margin-top:-.75em;
  2065. padding:1.25em 1em .5em 1em;
  2066. }
  2067. .bottominfo.tags-clicked:after {display:none;}
  2068. {/block:ifClickTags}
  2069.  
  2070. .bottominfo-left {
  2071. display:flex;
  2072. justify-content:flex-start;
  2073. align-items:center;
  2074. gap:1em;
  2075. }
  2076.  
  2077. /* reblog button */
  2078. .bil-icon a {
  2079. display:flex;
  2080. justify-content:center;
  2081. align-items:center;
  2082. padding:.5em;
  2083. background:var(--ColorGradientAccent);
  2084. border-radius:100%;
  2085. }
  2086. .bil-icon a:hover {transform:scale(1.1);}
  2087. .bil-icon i {
  2088. font-size:1.6em;
  2089. color:var(--ColorGradientOne);
  2090. }
  2091.  
  2092. /* like button */
  2093.  
  2094. a.likeb span, .bil-like {
  2095. display:flex;
  2096. align-items:center;
  2097. }
  2098. .bil-like i {
  2099. font-size:1.6em;
  2100. color:var(--ColorGradientText);
  2101. -webkit-transition: all 0.4s;
  2102. -moz-transition: all 0.4s;
  2103. -ms-transition: all 0.4s;
  2104. -o-transition: all 0.4s;
  2105. transition: all 0.4s;
  2106. }
  2107. .bil-like a:hover i {
  2108. color:var(--ColorGradientAccent);
  2109. text-shadow:{select:Glow};
  2110. -webkit-transition: all 0.4s;
  2111. -moz-transition: all 0.4s;
  2112. -ms-transition: all 0.4s;
  2113. -o-transition: all 0.4s;
  2114. transition: all 0.4s;
  2115. }
  2116.  
  2117. .likeb {
  2118. position: relative;
  2119. display: inline-block;
  2120. }
  2121.  
  2122. .likeb .like_button iframe {
  2123. position: absolute;
  2124. top: 0;
  2125. left: 0;
  2126. bottom: 0;
  2127. right: 0;
  2128. z-index: 2;
  2129. opacity: 0;
  2130. }
  2131.  
  2132. .like_button iframe {width: 100% !important; height: 100% !important;}
  2133. .likeb .liked + .actual-button i {
  2134. color:var(--ColorGradientAccent);
  2135. text-shadow:{select:Glow};
  2136. }
  2137.  
  2138. .clicktagsbutton {display:flex; align-items:center; justify-content:center; cursor:help;}
  2139. .clicktagsbutton i {
  2140. font-size:1.5em;
  2141. color:var(--ColorGradientText);
  2142. -webkit-transition: all 0.4s;
  2143. -moz-transition: all 0.4s;
  2144. -ms-transition: all 0.4s;
  2145. -o-transition: all 0.4s;
  2146. transition: all 0.4s;
  2147. }
  2148. .clicktagsbutton:hover i {
  2149. color:var(--ColorGradientAccent);
  2150. text-shadow:{select:Glow};
  2151. -webkit-transition: all 0.4s;
  2152. -moz-transition: all 0.4s;
  2153. -ms-transition: all 0.4s;
  2154. -o-transition: all 0.4s;
  2155. transition: all 0.4s;
  2156. }
  2157.  
  2158. .tagsbutton {display:none;}
  2159. .clicktagsbutton.tags-clicked i {color:var(--ColorGradientAccent); text-shadow:{select:Glow};}
  2160.  
  2161. /* bottom info right */
  2162. .bottominfo-right {
  2163. display:flex;
  2164. justify-content:flex-end;
  2165. align-items:center;
  2166. gap:1em;
  2167. }
  2168.  
  2169. .bottominfo-right a {
  2170. display:flex;
  2171. justify-content:center;
  2172. align-items:center;
  2173. }
  2174. .bottominfo-right i {
  2175. font-size:1.6em;
  2176. color:var(--ColorGradientText);
  2177. -webkit-transition: all 0.4s;
  2178. -moz-transition: all 0.4s;
  2179. -ms-transition: all 0.4s;
  2180. -o-transition: all 0.4s;
  2181. transition: all 0.4s;
  2182. }
  2183. .bottominfo-right a:hover i {
  2184. color:var(--ColorGradientAccent);
  2185. text-shadow:{select:Glow};
  2186. -webkit-transition: all 0.4s;
  2187. -moz-transition: all 0.4s;
  2188. -ms-transition: all 0.4s;
  2189. -o-transition: all 0.4s;
  2190. transition: all 0.4s;
  2191. }
  2192.  
  2193. #copybutton {cursor:help;}
  2194.  
  2195. /*--- TAGS ---*/
  2196.  
  2197. .tags, .clicktags {
  2198. width:calc(100% - 2em);
  2199. display:flex;
  2200. align-items:center;
  2201. flex-wrap:wrap;
  2202. gap:.75em;
  2203. background:var(--ColorPosts);
  2204. padding:.75em 1em .75em 1em;
  2205. border-radius:0 0 {select:Corners} {select:Corners};
  2206. border-top:1px solid var(--ColorBorders);
  2207. z-index:1;
  2208. }
  2209.  
  2210. .tags a {
  2211. display:flex;
  2212. justify-content:center;
  2213. align-items:center;
  2214. gap:.05em;
  2215. }
  2216.  
  2217. .tags a span {
  2218. color:var(--ColorText);
  2219. -webkit-transition: all 0.4s;
  2220. -moz-transition: all 0.4s;
  2221. -ms-transition: all 0.4s;
  2222. -o-transition: all 0.4s;
  2223. transition: all 0.4s;
  2224.  
  2225. }
  2226. .tags a:hover span {
  2227. color:var(--ColorAccent);
  2228. -webkit-transition: all 0.4s;
  2229. -moz-transition: all 0.4s;
  2230. -ms-transition: all 0.4s;
  2231. -o-transition: all 0.4s;
  2232. transition: all 0.4s;
  2233. }
  2234.  
  2235. .tags a b {
  2236. font-weight:normal;
  2237. color:var(--ColorAccent);
  2238. opacity:.85;
  2239. -webkit-transition: all 0.4s;
  2240. -moz-transition: all 0.4s;
  2241. -ms-transition: all 0.4s;
  2242. -o-transition: all 0.4s;
  2243. transition: all 0.4s;
  2244.  
  2245. }
  2246.  
  2247. /*--- PAGINATION ---*/
  2248.  
  2249. article.pagination {
  2250. width:calc(100% - 2em);
  2251. display:flex;
  2252. justify-content:space-evenly;
  2253. align-items:center;
  2254. gap:2em;
  2255. padding:.5em 1em .5em 1em;
  2256. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2257. }
  2258.  
  2259. .pagination-buttons {
  2260. display:flex;
  2261. justify-content:center;
  2262. align-items:center;
  2263. gap:1em;
  2264. }
  2265.  
  2266. .pagination-btn {
  2267. display:flex;
  2268. justify-content:center;
  2269. align-items:center;
  2270. }
  2271. .pagination-btn a {
  2272. display:flex;
  2273. justify-content:center;
  2274. align-items:center;
  2275. }
  2276. .pagination-btn i {
  2277. font-size:1.6em;
  2278. color:var(--ColorGradientText);
  2279. text-shadow:{select:glow};
  2280. -webkit-transition: all 0.4s;
  2281. -moz-transition: all 0.4s;
  2282. -ms-transition: all 0.4s;
  2283. -o-transition: all 0.4s;
  2284. transition: all 0.4s;
  2285. }
  2286. .pagination-btn:hover i {
  2287. color:var(--ColorGradientAccent);
  2288. -webkit-transition: all 0.4s;
  2289. -moz-transition: all 0.4s;
  2290. -ms-transition: all 0.4s;
  2291. -o-transition: all 0.4s;
  2292. transition: all 0.4s;
  2293. }
  2294. .pagination-btn.nopgn {opacity:.5; cursor:not-allowed;}
  2295. .pagination-btn.nopgn i {color:var(--ColorGradientAccent); text-shadow:none;}
  2296. .pagination-btn.nopgn:hover i {color:var(--ColorGradientAccent);}
  2297. .pagination-btn.nopgn.yespgn {display:none;}
  2298.  
  2299. .jump-btn, .jump-btn a, .currentpg {
  2300. display:flex;
  2301. justify-content:center;
  2302. align-items:center;
  2303. }
  2304. .jump-btn a, .currentpg {
  2305. font-size:.95em;
  2306. width:1.8em;
  2307. height:1.8em;
  2308. border-radius:100%;
  2309. }
  2310.  
  2311. .currentpg {
  2312. color:var(--ColorGradientText);
  2313. text-shadow:{select:Glow};
  2314. background:var(--ColorOpacity);
  2315. border:1px solid var(--ColorOpacity);
  2316. cursor:default;
  2317. }
  2318.  
  2319. .jump-btn a {
  2320. color:var(--ColorGradientOne);
  2321. background:var(--ColorGradientAccent);
  2322. border:1px solid var(--ColorGradientAccent);
  2323. }
  2324. .jump-btn a:hover {
  2325. color:var(--ColorGradientAccent);
  2326. text-shadow:{select:Glow};
  2327. background:var(--ColorOpacity);
  2328. border:1px solid var(--ColorOpacity);
  2329. }
  2330.  
  2331. /*--- TAG / DAY PAGES ---*/
  2332.  
  2333. article.tdpage {
  2334. width:calc(100% - 2em);
  2335. display:flex;
  2336. justify-content:flex-start;
  2337. align-items:center;
  2338. gap:1em;
  2339. padding:.5em 1em .5em 1em;
  2340. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2341. }
  2342.  
  2343. .tdpage-text {
  2344. font-family:'{text:title font}', sans-serif;
  2345. font-size:.95em;
  2346. color:var(--ColorGradientText);
  2347. text-transform:lowercase;
  2348. text-align:left;
  2349. }
  2350. .tdpage-text b {color:var(--ColorGradientText);}
  2351.  
  2352. .tdpage i {
  2353. font-size:1.3em;
  2354. color:var(--ColorGradientOne);
  2355. padding:.3em;
  2356. background:var(--ColorGradientAccent);
  2357. border-radius:100%;
  2358. }
  2359.  
  2360. /*--- PERMALINK INFO ---*/
  2361.  
  2362. .perma-page {
  2363. margin:1em 0 1em 0;
  2364. width:calc(100% - 2em);
  2365. display:flex;
  2366. flex-direction:column;
  2367. align-items:flex-start;
  2368. gap:1em;
  2369. padding:1em;
  2370. background:var(--ColorPosts);
  2371. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  2372. border-radius:{select:Corners};
  2373. }
  2374.  
  2375. .perma-page li {
  2376. display:flex;
  2377. justify-content:flex-start;
  2378. align-items:center;
  2379. gap:.5em;
  2380. }
  2381.  
  2382. .perma-page i {
  2383. font-size:1.2em;
  2384. color:var(--ColorGradientText);
  2385. padding:.3em;
  2386. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2387. border-radius:100%;
  2388. }
  2389.  
  2390. .perma-page span {
  2391. font-family:'{text:title font}', sans-serif;
  2392. font-size:.95em;
  2393. color:var(--ColorText);
  2394. text-transform:lowercase;
  2395. -webkit-transition: all 0.4s;
  2396. -moz-transition: all 0.4s;
  2397. -ms-transition: all 0.4s;
  2398. -o-transition: all 0.4s;
  2399. transition: all 0.4s;
  2400. }
  2401.  
  2402. .perma-page a {font-weight:700; color:var(--ColorTitle); position:relative;}
  2403.  
  2404. .perma-page a:hover {color:var(--ColorAccent);}
  2405. .perma-page a:after {
  2406. content: '';
  2407. position:absolute;
  2408. width:100%;
  2409. transform:scaleX(0);
  2410. height:2px;
  2411. bottom:-2px;
  2412. left:0;
  2413. background-color:var(--ColorLink);
  2414. transform-origin:center;
  2415. transition: transform 0.25s ease-out;
  2416. }
  2417.  
  2418. .perma-page a:hover:after {
  2419. transform: scaleX(1);
  2420. transform-origin:center;
  2421. }
  2422.  
  2423. /*--- POST NOTES ---*/
  2424.  
  2425. .notes {
  2426. margin:2em 0;
  2427. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2428. border-radius:{select:Corners};
  2429. }
  2430.  
  2431. .notes-title {
  2432. display:flex;
  2433. justify-content:flex-start;
  2434. align-items:center;
  2435. gap:1em;
  2436. padding:.5em 1em .5em 1em;
  2437. }
  2438.  
  2439. .notes-title span {
  2440. font-family:'{text:title font}', sans-serif;
  2441. color:var(--ColorGradientText);
  2442. text-align:left;
  2443. letter-spacing:.1em;
  2444. }
  2445. .notes-titleicon {
  2446. display:flex;
  2447. justify-content:center;
  2448. align-items:center;
  2449. padding:.5em;
  2450. background:var(--ColorGradientAccent);
  2451. border-radius:100%;
  2452. }
  2453. .notes-titleicon i {
  2454. font-size:1.6em;
  2455. color:var(--ColorGradientOne);
  2456. }
  2457.  
  2458. ol.notes {
  2459. max-width: 100%;
  2460. padding:.5em 1em .5em 1em;
  2461. margin:0;
  2462. background:var(--ColorPosts);
  2463. box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
  2464. }
  2465.  
  2466. .more_notes_link {
  2467. width:100%;
  2468. }
  2469. a.more_notes_link {
  2470. font-weight:bold;
  2471. letter-spacing: 0.1em;
  2472. }
  2473. a.more_notes_link::after {
  2474. content:'\eb98';
  2475. color:var(--ColorText);
  2476. }
  2477. a.more_notes_link::before {
  2478. content:'\eb98';
  2479. color:var(--ColorText);
  2480. position:absolute;
  2481. left:0;
  2482. font-family:'cappuccicons';
  2483. }
  2484.  
  2485. ol.notes li.note blockquote {
  2486. display:none;
  2487. }
  2488.  
  2489. ol.notes li.note {
  2490. padding:1em 0 1em 0;
  2491. list-style-type:none;
  2492. display:flex;
  2493. align-items:center;
  2494. gap:.5em;
  2495. font-size:.9em;
  2496. border-top:1px solid var(--ColorBorders);
  2497. }
  2498. ol.notes li.note:first-of-type {border-top:none;}
  2499. ol.notes li.note a {text-transform:uppercase;}
  2500.  
  2501. ol.notes li.note img.avatar {
  2502. width:1.5em;
  2503. height:1.5em;
  2504. padding:2px;
  2505. background:var(--ColorAccent);
  2506. border-radius:100%;
  2507. }
  2508.  
  2509. ol.notes li.note.reblog::after {
  2510. content:'\ec37';
  2511. color:#03cf35;
  2512. }
  2513.  
  2514. ol.notes li.note.like::after {
  2515. content:'\eb04';
  2516. color:#fe492f;
  2517. }
  2518.  
  2519. ol.notes li.note.reply::after {
  2520. content:'\e9d7';
  2521. color:#00b8ff;
  2522. }
  2523. ol.notes li.note.reply span {
  2524. color:#00b8ff;
  2525. }
  2526. ol.notes li.note.reply span.action {
  2527. color:var(--ColorText);
  2528. }
  2529.  
  2530. ol.notes li.note.original_post::after {
  2531. content:'\eb68';
  2532. color:var(--ColorTitle);
  2533. }
  2534. ol.notes li.note.original_post {
  2535. font-weight:bold;
  2536. color:var(--ColorTitle);
  2537. }
  2538.  
  2539. ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post, ol.notes li.note.reply, a.more_notes_link {
  2540. position:relative;
  2541. }
  2542. ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-left:.3em;}
  2543. ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes li.note.original_post::after, ol.notes li.note.reply::after, a.more_notes_link::after {
  2544. position:absolute;
  2545. right:0;
  2546. font-family:'cappuccicons';
  2547. }
  2548.  
  2549. /*---- BOTTOM BUTTONS ---*/
  2550.  
  2551. .bbuttons {
  2552. position:fixed;
  2553. left:1em;
  2554. bottom:1em;
  2555. display:flex;
  2556. flex-direction:column;
  2557. align-items:center;
  2558. gap:1em;
  2559. z-index:9999;
  2560. }
  2561.  
  2562. /* SCROLL TO TOP */
  2563. #totop {
  2564. display:none;
  2565. justify-content:center;
  2566. align-items:center;
  2567. padding:2px;
  2568. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2569. {block:ifGradientBG}
  2570. background:var(--ColorOpacity);
  2571. {/block:ifGradientBG}
  2572. border-radius:100%;
  2573. cursor:help;
  2574. }
  2575. #totop a {
  2576. width:2.35em;
  2577. height:2.35em;
  2578. display:flex;
  2579. justify-content:center;
  2580. align-items:center;
  2581. background:var(--ColorOpacity);
  2582. border-radius:100%;
  2583. cursor:help;
  2584. }
  2585. #totop:hover a {background:transparent;}
  2586.  
  2587. #totop i {
  2588. font-size:1.5em;
  2589. color:var(--ColorGradientText);
  2590. text-shadow:{select:glow};
  2591. -webkit-transition: all 0.4s;
  2592. -moz-transition: all 0.4s;
  2593. -ms-transition: all 0.4s;
  2594. -o-transition: all 0.4s;
  2595. transition: all 0.4s;
  2596. }
  2597.  
  2598. #totop:hover i {
  2599. color:var(--ColorGradientAccent);
  2600. text-shadow:{select:glow};
  2601. -webkit-transition: all 0.4s;
  2602. -moz-transition: all 0.4s;
  2603. -ms-transition: all 0.4s;
  2604. -o-transition: all 0.4s;
  2605. transition: all 0.4s;
  2606. -webkit-animation-duration: 2.5s;
  2607. animation-duration: 2.5s;
  2608. -webkit-animation-fill-mode: both;
  2609. animation-fill-mode: both;
  2610. -webkit-animation-timing-function: ease-in-out;
  2611. animation-timing-function: ease-in-out;
  2612. animation-iteration-count:1;
  2613. -webkit-animation-iteration-count:1;
  2614. animation-name:totop;
  2615. -moz-animation-name:totop;
  2616. }
  2617.  
  2618. @keyframes totop {
  2619. 0% {
  2620. -webkit-transform: translateY(0px);
  2621. -ms-transform: translateY(0px);
  2622. transform: translateY(0px)
  2623. }
  2624. 10% {
  2625. -webkit-transform: translateY(-3px);
  2626. -ms-transform: translateY(-3px);
  2627. transform: translateY(-3px)
  2628. }
  2629. 20% {
  2630. -webkit-transform: translateY(0px);
  2631. -ms-transform: translateY(0px);
  2632. transform: translateY(0px)
  2633. }
  2634. 30% {
  2635. -webkit-transform: translateY(-3px);
  2636. -ms-transform: translateY(-3px);
  2637. transform: translateY(-3px)
  2638. }
  2639. 40% {
  2640. -webkit-transform: translateY(0px);
  2641. -ms-transform: translateY(0px);
  2642. transform: translateY(0px)
  2643. }
  2644. 50% {
  2645. -webkit-transform: translateY(0px);
  2646. -ms-transform: translateY(0px);
  2647. transform: translateY(0px)
  2648. }
  2649. 60% {
  2650. -webkit-transform: translateY(0px);
  2651. -ms-transform: translateY(0px);
  2652. transform: translateY(0px)
  2653. }
  2654. 70% {
  2655. -webkit-transform: translateY(-3px);
  2656. -ms-transform: translateY(-3px);
  2657. transform: translateY(-3px)
  2658. }
  2659. 80% {
  2660. -webkit-transform: translateY(0px);
  2661. -ms-transform: translateY(0px);
  2662. transform: translateY(0px)
  2663. }
  2664. 90% {
  2665. -webkit-transform: translateY(-3px);
  2666. -ms-transform: translateY(-3px);
  2667. transform: translateY(-3px)
  2668. }
  2669. 100% {
  2670. -webkit-transform: translateY(0px);
  2671. -ms-transform: translateY(0px);
  2672. transform: translateY(0px)
  2673. }
  2674. }
  2675.  
  2676. /*--- CREDIT: DO NOT TOUCH ---*/
  2677.  
  2678. .credit {
  2679. display:flex;
  2680. justify-content:center;
  2681. align-items:center;
  2682. padding:2px;
  2683. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2684. {block:ifGradientBG}
  2685. background:var(--ColorOpacity);
  2686. {/block:ifGradientBG}
  2687. border-radius:100%;
  2688. }
  2689.  
  2690. .credit a {
  2691. width:2.35em;
  2692. height:2.35em;
  2693. display:flex;
  2694. justify-content:center;
  2695. align-items:center;
  2696. background:var(--ColorOpacity);
  2697. border-radius:100%;
  2698. }
  2699.  
  2700. .credit i {
  2701. font-size:1.5em;
  2702. color:var(--ColorGradientText);
  2703. text-shadow:{select:glow};
  2704. -webkit-transition: all 0.4s;
  2705. -moz-transition: all 0.4s;
  2706. -ms-transition: all 0.4s;
  2707. -o-transition: all 0.4s;
  2708. transition: all 0.4s;
  2709. }
  2710.  
  2711. .credit:hover i {
  2712. color:var(--ColorGradientAccent);
  2713. -webkit-transition: all 0.4s;
  2714. -moz-transition: all 0.4s;
  2715. -ms-transition: all 0.4s;
  2716. -o-transition: all 0.4s;
  2717. transition: all 0.4s;
  2718. -webkit-animation-duration: 2s;
  2719. animation-duration: 2s;
  2720. -webkit-animation-fill-mode: both;
  2721. animation-fill-mode: both;
  2722. -webkit-animation-timing-function: ease-in-out;
  2723. animation-timing-function: ease-in-out;
  2724. animation-iteration-count:infinite;
  2725. -webkit-animation-iteration-count:infinite;
  2726. animation-name: bounce;
  2727. -moz-animation-name: bounce;
  2728. }
  2729.  
  2730. @keyframes bounce {
  2731. 0% {
  2732. -webkit-transform: translateY(0px);
  2733. -ms-transform: translateY(0px);
  2734. transform: translateY(0px)
  2735. }
  2736. 25% {
  2737. -webkit-transform: translateY(-3px);
  2738. -ms-transform: translateY(-3px);
  2739. transform: translateY(-3px)
  2740. }
  2741. 50% {
  2742. -webkit-transform: translateY(0px);
  2743. -ms-transform: translateY(0px);
  2744. transform: translateY(0px)
  2745. }
  2746. 75% {
  2747. -webkit-transform: translateY(-3px);
  2748. -ms-transform: translateY(-3px);
  2749. transform: translateY(-3px)
  2750. }
  2751. 100% {
  2752. -webkit-transform: translateY(0px);
  2753. -ms-transform: translateY(0px);
  2754. transform: translateY(0px)
  2755. }
  2756. }
  2757.  
  2758. /*--- RESPONSIVENESS ---*/
  2759.  
  2760. @media only screen and (max-width: 1075px) {
  2761. .sidebar-button {display:flex;}
  2762. body.explore-click #explore {left:0;}
  2763. aside {position:fixed; left:4.5em; z-index:999;}
  2764. #sidebar {display:none;}
  2765. body.sidebar-click #sidebar {display:flex;}
  2766. body.sidebar-click .sidebar-button i {color:var(--ColorGradientAccent);}
  2767. }
  2768.  
  2769. @media only screen and (max-width: 700px) {
  2770. section {margin-left:4.5em; margin-right:4.5em;}
  2771. .tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton, .ti-name span {display:none;}
  2772. }
  2773.  
  2774. {CustomCSS}
  2775. </style>
  2776. </head>
  2777.  
  2778. <body>
  2779. <script>
  2780. document.body.classList.add('fade-out');
  2781. window.addEventListener('DOMContentLoaded', () => {
  2782. document.body.classList.remove('fade-out');
  2783. });
  2784. </script>
  2785. <main><!--- MAIN CONTAINER --->
  2786.  
  2787. <!-- TOP BUTTONS --->
  2788. <div class="topleft">
  2789.  
  2790. <!--- DAY/NIGHT --->
  2791. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2792. <span class="light-on" title="turn off the lights"><i class="ph-moon-fill"></i></span>
  2793. <span class="light-off" title="turn on the lights"><i class="ph-sun-fill"></i></span>
  2794. </button>
  2795.  
  2796. <!-- MUSIC PLAYER -->
  2797. {block:ifMusicPlayer}
  2798. <div class="music-container" id="music-container">
  2799. <div title="music player" class="music-button"><a><i class="ph-music-notes-fill"></i></a></div>
  2800. <div class="audio-container" id="audio-container">
  2801. <audio src="{text:Song URL}" id="audio"></audio>
  2802.  
  2803. <div class="audio-buttons">
  2804. <i id="notbtn" class="ph-queue-fill"></i>
  2805. <i id="notbtn" class="ph-rewind-fill"></i>
  2806. <button id="play" class="action-btn action-btn-big">
  2807. <i class="ph-play-fill"></i>
  2808. </button>
  2809. <i id="notbtn" class="ph-fast-forward-fill"></i>
  2810. <i id="notbtn" class="ph-playlist-fill"></i>
  2811. </div>
  2812.  
  2813. <div class="img-container">
  2814. <img src="{text:Song Image URL}" alt="music-cover" id="cover">
  2815. <div class="music-info">
  2816. <div id="title">{text:Song Name}</div>
  2817. <div id="artist">{text:Song Artist}</div>
  2818. </div>
  2819. </div>
  2820. </div>
  2821. </div>
  2822. {block:ifMusicPlayer}
  2823.  
  2824. <div title="toggle sidebar" class="sidebar-button"><a><i class="ph-sidebar-fill"></i></a></div>
  2825. </div>
  2826.  
  2827. <div class="topright">
  2828. <div title="toggle controls" id="controlsbutton"><a><i class="ph-gear-fill"></i></a></div>
  2829. {block:ifUpdates}
  2830. <div class="updates-wrap">
  2831. <div title="updates" class="updates-button"><a><i class="ph-bell-fill"></i></a></div>
  2832. <div class="updates-container">
  2833. <div class="updates-title">updates</div>
  2834. <div class="updates">
  2835. <li><i class="ph-{text:Update 1 Icon}"></i><span>{text:Update 1}</span></li>
  2836. {block:ifUpdate2}<li><i class="ph-{text:Update 2 Icon}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
  2837. {block:ifUpdate3}<li><i class="ph-{text:Update 3 Icon}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
  2838. {block:ifUpdate4}<li><i class="ph-{text:Update 4 Icon}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
  2839. {block:ifUpdate5}<li><i class="ph-{text:Update 5 Icon}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
  2840. {block:ifUpdate6}<li><i class="ph-{text:Update 6 Icon}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
  2841. </div>
  2842. </div>
  2843. </div>
  2844. {/block:ifUpdates}
  2845. </div>
  2846.  
  2847. <!--- SIDEBAR --->
  2848. <aside>
  2849. <div id="sidebar">
  2850. <div class="sidebar-wrap">
  2851.  
  2852. <div class="svg-container">
  2853. <svg viewBox="0 0 250 250" preserveAspectRatio="xMinYMin meet">
  2854. <path d="M0,50 C75,100 150,0 250,50 L250,00 L0,0 Z" style="stroke: none; fill:var(--ColorGradientOne);"></path>
  2855. </svg>
  2856. </div>
  2857.  
  2858. <div class="title">
  2859. <img src="{PortraitURL-128}">
  2860. <a href="/"><b>{Title}</b><i>@{Name}</i></a>
  2861. </div>
  2862. {block:ifCustomDescription}<div class="description">{text:Custom Description}</div>{/block:ifCustomDescription}
  2863. <div class="sidebar-bottom">
  2864. <a title="home" class="sb-link" href="/"><i class="ph-house-fill"></i></a>
  2865. {block:AskEnabled}<a title="contact" class="sb-link" href="/ask"><i class="ph-chats-circle-fill"></i></a>{/block:AskEnabled}
  2866. <a title="archive" class="sb-link" href="/archive"><i class="ph-archive-fill"></i></a>
  2867. <div title="navigate" class="sb-nav"><i class="ph-navigation-arrow-fill"></i></div>
  2868. <div class="sb-search">
  2869. <i title="toggle searchbar" class="ph-magnifying-glass"></i>
  2870. <div class="searchwrap">
  2871. <form class="search" action="javascript:return false">
  2872. <input type="text" class="query" placeholder="search"></form>
  2873. </div>
  2874. </div>
  2875. </div>
  2876. <nav>
  2877. {block:ifSidebarLink1}<a href="{text:Sidebar Link 1 URL}"><i class="ph-number-one"></i><span>{text:Sidebar Link 1}</span></a>{/block:ifSidebarLink1}
  2878. {block:ifSidebarLink2}<a href="{text:Sidebar Link 2 URL}"><i class="ph-number-two"></i><span>{text:Sidebar Link 2}</span></a>{/block:ifSidebarLink2}
  2879. {block:ifSidebarLink3}<a href="{text:Sidebar Link 3 URL}"><i class="ph-number-three"></i><span>{text:Sidebar Link 3}</span></a>{/block:ifSidebarLink3}
  2880. {block:ifSidebarLink4}<a href="{text:Sidebar Link 4 URL}"><i class="ph-number-four"></i><span>{text:Sidebar Link 4}</span></a>{/block:ifSidebarLink4}
  2881. {block:ifSidebarLink5}<a href="{text:Sidebar Link 5 URL}"><i class="ph-number-five"></i><span>{text:Sidebar Link 5}</span></a>{/block:ifSidebarLink5}
  2882. {block:ifSidebarLink6}<a href="{text:Sidebar Link 6 URL}"><i class="ph-number-six"></i><span>{text:Sidebar Link 6}</span></a>{/block:ifSidebarLink6}
  2883. </nav>
  2884. </div>
  2885. </div><!-- .sidebar-wrap -->
  2886. </div><!-- #sidebar -->
  2887. </aside>
  2888.  
  2889. <!--- POSTS CONTAINER --->
  2890. <section>
  2891.  
  2892. <!--- TAG AND DAY PAGES --->
  2893. {block:TagPage}
  2894. <article class="tdpage">
  2895. <i class="ph-tag-fill"></i>
  2896. <div class="tdpage-text">
  2897. showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b>
  2898. </div>
  2899. </article>
  2900. {/block:TagPage}
  2901.  
  2902. {block:DayPage}
  2903. <article class="tdpage">
  2904. <i class="ph-calendar-plus-fill"></i>
  2905. <div class="tdpage-text">
  2906. showing all posts made on <b>{Month} {DayOfMonth}, {Year}</b>
  2907. </div>
  2908. </article>
  2909. {/block:DayPage}
  2910.  
  2911. <!--- POSTS --->
  2912. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2913.  
  2914. <article class="posts" id="{PostID}" post-type="{PostType}">
  2915.  
  2916. <!--- TOP POST INFO --->
  2917. {block:Date}
  2918. <div class="topinfo">
  2919.  
  2920. <div class="topinfo-left">
  2921. {block:NotReblog}
  2922. <div class="topinfo-img"><a title="original post" href="/"><img src="{PortraitURL-128}"></a></div>
  2923. {/block:NotReblog}
  2924. {block:RebloggedFrom}
  2925. <div class="topinfo-img"><a target="_blank" title="@{ReblogRootName}" href="//{ReblogRootName}.tumblr.com"><img src="{ReblogRootPortraitURL-128}"></a></div>
  2926. {/block:RebloggedFrom}
  2927. <div class="topinfo-textwrap">
  2928. {block:NotReblog}
  2929. <div class="ti-name"><span>{PostType} post by </span><a href="{Permalink}">{Name}</a></div>
  2930. {/block:NotReblog}
  2931. {block:RebloggedFrom}
  2932. <div class="ti-name"><span>{PostType} post by </span><a target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a></div>
  2933. {/block:RebloggedFrom}
  2934. <div class="ti-text">
  2935. <b class="time-ago">{TimeStamp}</b>
  2936. <span>●</span>
  2937. <b class="notecount">{NoteCountWithLabel}</b>
  2938. </div>
  2939. </div>
  2940. </div>
  2941. <div class="topinfo-right">
  2942. <a {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel} title="view permalink" href="{Permalink}"><i class="ph-link-simple-horizontal"></i></a>
  2943. {block:PinnedPostLabel}<a title="pinned post" href="{Permalink}"><i class="ph-push-pin-fill"></i></a>{/block:PinnedPostLabel}
  2944. </div>
  2945. </div>
  2946. {/block:Date}
  2947.  
  2948. <div class="post-wrap">
  2949. <!-- PHOTO POSTS -->
  2950. {block:Photo}
  2951. <div class="photopost">
  2952. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  2953. {block:Caption}
  2954. {block:NotReblog}
  2955. <div class="caption">{Caption}</div>
  2956. {/block:NotReblog}
  2957. {block:Rebloggedfrom}
  2958. {block:Reblogs}
  2959. <div class="caption">
  2960. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  2961. {Body}
  2962. </div>
  2963. {/block:Reblogs}
  2964. {/block:RebloggedFrom}
  2965. {/block:Caption}
  2966. </div>
  2967. {/block:Photo}
  2968.  
  2969. <!-- PHOTOSET POSTS -->
  2970. {block:Photoset}
  2971. <div class="photopost">
  2972. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  2973. {block:Caption}
  2974. {block:NotReblog}
  2975. <div class="caption">{Caption}</div>
  2976. {/block:NotReblog}
  2977. {block:Rebloggedfrom}
  2978. {block:Reblogs}
  2979. <div class="caption">
  2980. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  2981. {Body}
  2982. </div>
  2983. {/block:Reblogs}
  2984. {/block:RebloggedFrom}
  2985. {/block:Caption}
  2986. </div>
  2987. {/block:Photoset}
  2988.  
  2989. <!--- TEXT POSTS --->
  2990. {block:Text}
  2991. {block:Title}
  2992. <h1><a href="{Permalink}">{Title}</a></h1>
  2993. {/block:Title}
  2994. {block:NotReblog}
  2995. <div class="caption">{Body}</div>
  2996. {/block:NotReblog}
  2997. {block:Rebloggedfrom}
  2998. {block:Reblogs}
  2999. <div class="caption">
  3000. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3001. {Body}
  3002. </div>
  3003. {/block:Reblogs}
  3004. {/block:RebloggedFrom}
  3005. {/block:Text}
  3006.  
  3007.  
  3008. <!-- VIDEO POSTS -->
  3009. {block:Video}
  3010. <div class="video">{Video-700}</div>
  3011. {block:Caption}
  3012. {block:NotReblog}
  3013. <div class="caption">{Caption}</div>
  3014. {/block:NotReblog}
  3015. {block:Rebloggedfrom}
  3016. {block:Reblogs}
  3017. <div class="caption">
  3018. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3019. {Body}
  3020. </div>
  3021. {/block:Reblogs}
  3022. {/block:RebloggedFrom}
  3023. {/block:Caption}
  3024. {/block:Video}
  3025.  
  3026. <!--- CHAT POSTS --->
  3027. {block:Chat}
  3028. <ul class="chat">
  3029. {block:Lines}
  3030. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  3031. <li>{Line} <div class="blurb"></div></li>
  3032. {/block:Lines}
  3033. </ul>
  3034. {/block:Chat}
  3035.  
  3036. <!--- LINK POSTS --->
  3037. {block:Link}
  3038. <div class="linkpost">
  3039. <a href="{URL}">
  3040. {block:Thumbnail}<div class="linkimage"><img src="{Thumbnail-HighRes}">
  3041. <div class="linkimage-overlay">{Name}</div>
  3042. </div>{/block:Thumbnail}
  3043. <div class="link" {block:Thumbnail}id="thumbnail"{/block:Thumbnail}>
  3044. <div class="linkicon"><i class="ph-link"></i></div>
  3045. <div class="linktitle"><b>{Name}</b>
  3046. {block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
  3047. </div>
  3048. </div>
  3049. </a>
  3050. </div>
  3051. {block:Description}
  3052. {block:NotReblog}
  3053. <div class="caption">{Description}</div>
  3054. {/block:NotReblog}
  3055. {/block:Description}
  3056. {block:RebloggedFrom}
  3057. {block:Reblogs}
  3058. <div class="caption">
  3059. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3060. {Body}
  3061. </div>
  3062. {/block:Reblogs}
  3063. {/block:RebloggedFrom}
  3064. {/block:Link}
  3065.  
  3066. <!--- AUDIO POSTS --->
  3067. {block:Audio}
  3068. <div class="audiopost">
  3069. <div class="audio">
  3070. <div class="audiowrap">
  3071. <div class="albumart-circle">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
  3072. <div class="audiotitle">
  3073. <b>{block:trackname}{Trackname}{/block:trackname}</b>
  3074. <span>{block:Album}{Album}{/block:Album}</span>
  3075. <span>{block:Artist}{Artist}{/block:Artist}</span>
  3076. </div><!-- audiotitle -->
  3077. </div>
  3078. <div class="audiobuttons">
  3079. <i class="ph-playlist-fill"></i>
  3080. <i class="ph-rewind-fill"></i>
  3081. <div class="audioplaybg">
  3082. <div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div>
  3083. </div>
  3084. <i class="ph-fast-forward-fill"></i>
  3085. <i class="ph-queue-fill"></i>
  3086. </div>
  3087. </div>
  3088. </div>
  3089. {block:Caption}
  3090. {block:NotReblog}
  3091. <div class="caption">{Caption}</div>
  3092. {/block:NotReblog}
  3093. {block:RebloggedFrom}
  3094. {block:Reblogs}
  3095. <div class="caption">
  3096. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3097. {Body}
  3098. </div>
  3099. {/block:Reblogs}
  3100. {/block:RebloggedFrom}
  3101. {/block:Caption}
  3102. {/block:Audio}
  3103.  
  3104. <!-- QUOTE POSTS -->
  3105. {block:Quote}
  3106. <div class="quotepost">
  3107. <div class="quote">
  3108. <div class="quotewrap"><i class="ph-quotes-fill"></i><span>{Quote}</span></div>
  3109. <div class="source">
  3110. {Source}
  3111. </div>
  3112. </div>
  3113. </div>
  3114. {/block:Quote}
  3115.  
  3116. <!--- ANSWER POSTS --->
  3117. {block:Answer}
  3118. <div class="askwrap">
  3119. <div class="asker">
  3120. <div class="askerstart">
  3121. <b>{Asker}</b>
  3122. <span>sent a message</span>
  3123. </div>
  3124. <div class="askicon"><img src="{AskerPortraitURL-64}"></div>
  3125. </div>
  3126. <div class="question">
  3127. {Question}
  3128. <div class="blurb"></div>
  3129. </div>
  3130. </div>
  3131. {block:Answerer}
  3132. <div class="answerwrap">
  3133. <div class="answerer">
  3134. <div class="usericon"><img src="{AnswererPortraitURL-64}"></div>
  3135. <div class="answererwrap">
  3136. <div class="username" {block:IsDeactivated}title="deactivated"{/block:IsDeactivated}>{Answerer}</div>
  3137. <div class="answermsg">replied</div>
  3138. </div>
  3139. </div>
  3140. <div class="answer">
  3141. <div class="blurb"></div>
  3142. {Answer}</div>
  3143. </div>
  3144. {/block:Answerer}
  3145. {block:NotReblog}
  3146. <div class="answerwrap">
  3147. <div class="answerer">
  3148. <div class="usericon"><img src="{PortraitURL-64}"></div>
  3149. <div class="answererwrap">
  3150. <div class="username"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="/">{Name}</a></div>
  3151. <div class="answermsg">replied</div>
  3152. </div>
  3153. </div>
  3154. <div class="answer">
  3155. <div class="blurb"></div>
  3156. {Replies}</div>
  3157. </div>
  3158. {/block:NotReblog}
  3159. {block:RebloggedFrom}
  3160. {block:Reblogs}
  3161. <div class="caption">
  3162. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3163. {Body}
  3164. </div>
  3165. {/block:Reblogs}
  3166. {/block:RebloggedFrom}
  3167. {/block:Answer}
  3168. </div>
  3169.  
  3170. </div><!-- .post-wrap -->
  3171.  
  3172. {block:Date}
  3173. <div class="bottominfo-wrap">
  3174.  
  3175. <!--- TAGS --->
  3176. {block:HasTags}
  3177. <div class="tags">
  3178. {block:Tags}<a href="{TagURL}"><b>#</b><span>{Tag}</span></a>{/block:Tags}
  3179. </div>
  3180. {/block:HasTags}
  3181.  
  3182. <!--- BOTTOM POST INFO --->
  3183. <div class="bottominfo">
  3184.  
  3185. <div class="bottominfo-left">
  3186. <div class="bil-icon"><a title="reblog" href="{ReblogURL}" target="_blank"><i class="ph-arrows-clockwise-bold"></i></a></div>
  3187. <div class="bil-like"><a title="like" class="likeb" href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-straight-fill"></i></span></a></div>
  3188. {block:ifClickTags}<div title="toggle tags" class="clicktagsbutton"><i class="ph-tag-fill"></i></div>{/block:ifClickTags}
  3189. </div><!-- .bottominfo-left -->
  3190. <div class="bottominfo-right">
  3191. {block:RebloggedFrom}
  3192. <a target="_blank" title="reblogged from @{ReblogParentName}" href="{ReblogParentURL}"><i class="ph-arrow-u-down-left-fill"></i></a>
  3193. {/block:RebloggedFrom}
  3194. <a title="view day page" title="{Month} {DayofMonth}{DayofMonthSuffix}, {Year}" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ph-clock-fill"></i></a>
  3195. <a title="copy link to post" id="copybutton" data-clipboard-text="{Permalink}"><i class="ph-copy-fill"></i></a>
  3196. </div><!-- .bottominfo-right -->
  3197.  
  3198. </div><!-- .bottominfo -->
  3199.  
  3200. </div><!-- .bottominfo-wrap -->
  3201. {/block:Date}
  3202.  
  3203. </article> <!-- POSTS END -->
  3204.  
  3205. <!--- PERMALINK INFO --->
  3206. {block:Date}
  3207. {block:PermalinkPage}
  3208. <div class="perma-page">
  3209. {block:NotReblog}<li><i class="ph-map-pin-fill"></i><span>original post</span></li>{/block:NotReblog}
  3210. {block:RebloggedFrom}<li><i class="ph-map-pin-fill"></i><span>originally posted by <a href="{ReblogRootURL}">@{ReblogRootName}</a></span></li>{/block:RebloggedFrom}
  3211.  
  3212. {block:RebloggedFrom}<li><i class="ph-arrow-counter-clockwise-bold"></i><span>reblogged from <a href="{ReblogParentURL}">@{ReblogParentName}</a></span></li>{/block:RebloggedFrom}
  3213. <li><i class="ph-clock-fill"></i><span>posted <a title="view day page" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix}</a> at {12hour}{ampm}</span></li>
  3214. </div>
  3215. {/block:PermalinkPage}
  3216. {/block:Date}
  3217.  
  3218. <!--- POST NOTES --->
  3219. {block:PermalinkPage}{block:Date}
  3220. {block:NoteCount}{block:PostNotes}
  3221. <div class="notes">
  3222. <div class="notes-title">
  3223. <div class="notes-titleicon"><i class="ph-music-note-fill"></i></div>
  3224. <span>{NoteCountWithLabel}</span>
  3225. </div>
  3226. <div class="notes-container">{PostNotes-64}</div>
  3227. </div>
  3228. {/block:PostNotes}{/block:NoteCount}
  3229. {/block:Date}{/block:PermalinkPage}
  3230. {/block:Posts}
  3231.  
  3232. <!--- PAGINATION --->
  3233. {block:Pagination}
  3234.  
  3235. <article class="pagination">
  3236. <div class="pagination-buttons">
  3237. {block:PreviousPage}
  3238. <div class="pagination-btn"><a title="go back" href="{previouspage}"><i class="ph-caret-left-bold"></i></a></div>
  3239. {/block:PreviousPage}
  3240. <div class="pagination-btn nopgn {block:PreviousPage}yespgn{/block:PreviousPage}"><a><i class="ph-caret-left-bold"></i></a></div>
  3241. </div>
  3242.  
  3243. {block:JumpPagination length="5"}
  3244. {block:CurrentPage}
  3245. <div title="current page" class="currentpg">{PageNumber}</div>
  3246. {/block:CurrentPage}
  3247. {block:JumpPage}
  3248. <div class="jump-btn"><a title="jump to page {PageNumber}" class="jump_page" href="{URL}">{PageNumber}</a></div>
  3249. {/block:JumpPage}
  3250. {/block:JumpPagination}
  3251.  
  3252. <div class="pagination-buttons">
  3253. {block:NextPage}
  3254. <div class="pagination-btn"><a title="go forward" href="{nextpage}"><i class="ph-caret-right-bold"></i></a></div>
  3255. {/block:NextPage}
  3256.  
  3257. <div {block:NextPage}style="display:none;"{/block:NextPage} class="pagination-btn nopgn"><a><i class="ph-caret-right-bold"></i></a></div>
  3258. </div>
  3259. </article>
  3260. {/block:Pagination}
  3261.  
  3262. </section> <!-- POSTS CONTAINER ENDS -->
  3263.  
  3264. <!---- BOTTOM BUTTONS ----->
  3265. <div class="bbuttons">
  3266. <div id="totop"><a title="back to top" href="#top" target="_self"><i class="ph-caret-up-bold"></i></a></div>
  3267. <!--- CREDIT: DO NOT TOUCH --->
  3268. <div class="credit">
  3269. <a title="katara theme by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost-fill"></i></a>
  3270. </div>
  3271. </div>
  3272.  
  3273. </main> <!-- MAIN CONTAINER ENDS -->
  3274.  
  3275. <script>
  3276.  
  3277. // music player
  3278. {block:ifMusicPlayer}
  3279. const musicContainer = document.querySelector('.music-container');
  3280. const playBtn = document.querySelector('#play');
  3281. const audio = document.querySelector('#audio');
  3282. const title = document.querySelector('#title');
  3283. const cover = document.querySelector('#cover');
  3284.  
  3285. function playSong() {
  3286. musicContainer.classList.add('play');
  3287. playBtn.querySelector('#play i').classList.remove('ph-play-fill');
  3288. playBtn.querySelector('#play i').classList.add('ph-pause-fill');
  3289.  
  3290. audio.play();
  3291. }
  3292.  
  3293. function pauseSong() {
  3294. musicContainer.classList.remove('play')
  3295. playBtn.querySelector('#play i').classList.add('ph-play-fill')
  3296. playBtn.querySelector('#play i').classList.remove('ph-pause-fill')
  3297.  
  3298. audio.pause()
  3299. }
  3300.  
  3301. // event listeners
  3302. playBtn.addEventListener('click', () => {
  3303. const isPlaying = musicContainer.classList.contains('play');
  3304.  
  3305. if (isPlaying) {
  3306. pauseSong();
  3307. } else {
  3308. playSong();
  3309. }
  3310. });
  3311.  
  3312. document.getElementById("audio").loop = true;
  3313. {/block:ifMusicPlayer}
  3314.  
  3315. /// photoset
  3316. $(document).ready(function(){
  3317. $('.photo-slideshow').pxuPhotoset({
  3318. lightbox: true,
  3319. rounded: 'corners',
  3320. gutter: '4px',
  3321. borderRadius: '{select:Corners}',
  3322. photoset: '.photo-slideshow',
  3323. photoWrap: '.photo-data',
  3324. photo: '.pxu-photo'
  3325. });
  3326. });
  3327.  
  3328. // tooltips
  3329. tippy('[title]', {
  3330. theme: 'custom',
  3331. arrow: false,
  3332. followCursor: true,
  3333. delay: 100,
  3334. placement: 'bottom',
  3335. offset: "40, 10",
  3336. zIndex: 9999999999,
  3337. maxWidth: 400,
  3338.  
  3339. content(reference) {
  3340. const title = reference.getAttribute('title');
  3341. reference.removeAttribute('title');
  3342. return title;
  3343. },
  3344. });
  3345.  
  3346. // notes
  3347. $('article').find('.notecount').each(function(){
  3348. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  3349. if (n > 999) {
  3350. n = Math.floor(n / 100) / 10;
  3351. $(this).text(n + 'k notes');
  3352. }
  3353. });
  3354.  
  3355. // videos
  3356. $(document).ready(function() {
  3357. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  3358. });
  3359.  
  3360. // music button
  3361. $(document).ready(function(){
  3362. $(".audio-container").hide();
  3363. $('.music-button').click(function(){
  3364. $(".audio-container").slideToggle(0);
  3365. $('body').toggleClass('music-clicked');
  3366. });
  3367. });
  3368.  
  3369. // updates button
  3370. $(document).ready(function(){
  3371. $(".updates-container").hide();
  3372. $('.updates-button').click(function(){
  3373. $(".updates-container").slideToggle(0);
  3374. $('body').toggleClass('updates-clicked');
  3375. });
  3376. });
  3377.  
  3378. // sidebar buttons
  3379. $(document).ready(function(){
  3380. $("nav").hide();
  3381. $('.sb-nav').click(function(){
  3382. $("nav").slideToggle(0);
  3383. $('body').toggleClass('nav-clicked');
  3384. });
  3385. });
  3386.  
  3387. $(document).ready(function(){
  3388. $(".searchwrap").hide();
  3389. $('.sb-search i').click(function(){
  3390. $(".searchwrap").slideToggle(0);
  3391. $('body').toggleClass('search-clicked');
  3392. });
  3393. });
  3394.  
  3395. // searchbar
  3396. $(document).ready(function(){
  3397. $('.search').submit(function(event){
  3398. var value = $('input:first').val();
  3399. location.replace('http://{Name}.tumblr.com/search/' + value);
  3400. });
  3401. });
  3402.  
  3403. // scroll to top
  3404. $(document).ready(function(){
  3405. $('#totop').click(function(){
  3406. $('html, body').animate({scrollTop : 0},800);
  3407. return false;
  3408. });
  3409. });
  3410. var mybutton = document.getElementById("totop");
  3411. window.onscroll = function() {scrollFunction()};
  3412.  
  3413. function scrollFunction() {
  3414. if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
  3415. mybutton.style.display = "flex";
  3416. } else {
  3417. mybutton.style.display = "none";
  3418. }
  3419. }
  3420.  
  3421. // toggle tags
  3422. {block:ifClickTags}
  3423. $(document).ready(function(){
  3424. $('.tags').hide();
  3425. $('.clicktagsbutton').click(function() {
  3426. $(this).closest('article').find('.tags').slideToggle(0);
  3427. $(this).toggleClass('tags-clicked');
  3428. $(this).find(".bottominfo").toggleClass('tags-clicked');
  3429. return false;
  3430. });
  3431. });
  3432. {/block:ifClickTags}
  3433.  
  3434. // tumblr controls
  3435. $(document).ready(function(){
  3436. $('#controlsbutton').click(function(){
  3437. $('body').toggleClass('controlsclick');
  3438. });
  3439. });
  3440.  
  3441. // responsive sidebar
  3442. $(document).ready(function(){
  3443. $('.sidebar-button').click(function(){
  3444. $('body').toggleClass('sidebar-click');
  3445. });
  3446. });
  3447.  
  3448. // day/night mode
  3449. const toggle = document.getElementById("theme-toggle");
  3450.  
  3451. toggle.onclick = function () {
  3452. // add class to html and make transition snappy
  3453. document.documentElement.classList.add("theme-transition");
  3454. // alright lets retrive the info from data-theme
  3455. let currentTheme = document.documentElement.getAttribute("data-theme");
  3456. // if it's dark already, let's go into the light
  3457. let targetTheme = "light";
  3458. // but if it is light let's toggle dark mode
  3459. if (currentTheme === "light") {
  3460. targetTheme = "dark";
  3461. }
  3462. // ok now that theme has been toggled, get rid of snappy transition
  3463. window.setTimeout(function () {
  3464. document.documentElement.classList.remove("theme-transition");
  3465. }, 50);
  3466. // we're going to save our theme preference now
  3467. document.documentElement.setAttribute("data-theme", targetTheme);
  3468. localStorage.setItem("theme", targetTheme);
  3469. };
  3470.  
  3471. </script>
  3472.  
  3473.  
  3474. </body>
  3475. </html>
Advertisement
Add Comment
Please, Sign In to add comment