API tools faq
paste
nicolas-sage

theme 18: appa

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