themesbyces

Theme — Night Terrors

Oct 5th, 2020 (edited)
2,100
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 39.55 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!--
  14.  
  15. theme: night terrors
  16. designed and coded by ghcstfaec
  17. see credits @ https://ghcstfaec.tumblr.com/credits
  18.  
  19. -->
  20.  
  21. <!-- Metadata -->
  22.  
  23. <meta name="color:Background" content="#f0f0f0"/>
  24. <meta name="color:Border" content="#d2d2d2"/>
  25. <meta name="color:Chat Even Background" content="#f0f0f0"/>
  26. <meta name="color:Description" content="#f8f8f8"/>
  27. <meta name="color:Description Link" content="#ffffff"/>
  28. <meta name="color:Link" content="#000000"/>
  29. <meta name="color:Link Hover" content="#cfcfcf"/>
  30. <meta name="color:Like" content="#ec6363"/>
  31. <meta name="color:Main Color One" content="#ff8833"/>
  32. <meta name="color:Main Color Two" content="#ffcc99"/>
  33. <meta name="color:Pin" content="#31a49d"/>
  34. <meta name="color:Post Background" content="#ffffff"/>
  35. <meta name="color:Scrollbar" content="#000000"/>
  36. <meta name="color:Sidebar Background" content="#2c2d32"/>
  37. <meta name="color:Text" content="#555555"/>
  38. <meta name="color:Tooltip Background" content="#000000"/>
  39. <meta name="color:Tooltip Color" content="#ffffff"/>
  40. <meta name="color:UI Background" content="#1c2023"/>
  41.  
  42. <meta name="color:Ghost Color" content="#738a82"/>
  43. <meta name="color:Ghost EM" content="#2b4343"/>
  44. <meta name="color:Bubble Background" content="#ffffff"/>
  45. <meta name="color:Bubble Border" content="#eeeeee"/>
  46. <meta name="color:Bubble Color" content="#555555"/>
  47.  
  48. <meta name="select:Body Font" content="Karla" title="Karla"/>
  49. <meta name="select:Body Font" content="Montserrat" title="Montserrat"/>
  50. <meta name="select:Body Font" content="Muli" title="Muli"/>
  51. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  52. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  53. <meta name="select:Body Font" content="Raleway" title="Raleway"/>
  54. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  55.  
  56. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  57. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  58. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  59.  
  60. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  61. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  62.  
  63. <meta name="image:Icon Image" content="https://i.imgur.com/IV4ds9y.jpeg"/>
  64.  
  65. <meta name="text:Title" content="Night Terrors"/>
  66. <meta name="text:Subtitle" content="What Did You Dream About?"/>
  67.  
  68. <meta name="text:Link 1 URL" content="/"/>
  69. <meta name="text:Link 1 Name" content="Link One"/>
  70. <meta name="text:Link 2 URL" content="/"/>
  71. <meta name="text:Link 2 Name" content="Link Two"/>
  72. <meta name="text:Link 3 URL" content="/"/>
  73. <meta name="text:Link 3 Name" content="Link Three"/>
  74. <meta name="text:Link 4 URL" content="/"/>
  75. <meta name="text:Link 4 Name" content="Link Four"/>
  76. <meta name="text:Link 5 URL" content="/"/>
  77. <meta name="text:Link 5 Name" content="Link Five"/>
  78. <meta name="text:Link 6 URL" content="/"/>
  79. <meta name="text:Link 6 Name" content="Link Six"/>
  80. <meta name="text:Link 7 URL" content="/"/>
  81. <meta name="text:Link 7 Name" content="Link Seven"/>
  82.  
  83. <meta name="text:Update Date 1" content="MM/DD/YYYY"/>
  84. <meta name="text:Update 1" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  85. <meta name="text:Update Date 2" content="MM/DD/YYYY"/>
  86. <meta name="text:Update 2" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  87. <meta name="text:Update Date 3" content="MM/DD/YYYY"/>
  88. <meta name="text:Update 3" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."/>
  89.  
  90. <meta name="if:Submit Link" content="1"/>
  91.  
  92. <meta name="if:Ghost Bubble" content="0"/>
  93.  
  94. <meta name="if:Watchlist" content="1"/>
  95.  
  96. <meta name="if:Hide Tags" content="0"/>
  97. <meta name="if:Show Tags" content="1"/>
  98.  
  99. <!-- Google Fonts Script -->
  100.  
  101. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Muli:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  102.  
  103. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  104.  
  105. <!-- jQuery Script -->
  106.  
  107. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  108.  
  109. <!-- Styled Tooltips Script -->
  110.  
  111. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  112.  
  113. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  114.  
  115. <script>
  116. (function($){
  117. $(document).ready(function(){
  118. $("a[title]").style_my_tooltips({
  119. tip_follows_cursor:true,
  120. tip_delay_time:90,
  121. tip_fade_speed:600,
  122. attribute:"title"
  123. });
  124. });
  125. })(jQuery);
  126. </script>
  127.  
  128. <!-- Font Awesome Script -->
  129.  
  130. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  131.  
  132. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  133.  
  134. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  135.  
  136. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  137.  
  138. <script>
  139. tumblr_npf_audio({
  140. emptyTitleText: "",
  141. emptyArtistText: "",
  142. emptyAlbumText: "",
  143. titleLabel: "",    
  144. artistLabel: "",
  145. albumLabel: "",
  146. });
  147. </script>
  148.  
  149. <!-- Hide & Show Script -->
  150.  
  151. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  152.  
  153. <script>
  154. $(document).ready(function(){
  155. $('.tags').hide();
  156. $('.tags-title').click(function() {
  157. $(this).closest('.entries').find('.tags').slideToggle(500);
  158. });
  159. });
  160. </script>
  161.  
  162. <!-- Unnest Captions Script -->
  163.  
  164. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  165.  
  166. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  167.  
  168. <script>
  169. $(function(){  $('.entries').unnest({
  170. yourCaption: ".text, .caption",
  171. wrapName: ".tumblr_parent",
  172. newCaptionUsername: false,
  173. originalPostCaptionUsername: false,
  174. tumblrAvatars: true,
  175. tumblrAvatarClass: ".tumblr_avatar",
  176. usernameColon: false
  177. });
  178. });
  179. </script>
  180.  
  181. <!--
  182.         NPF images fix v4.0 by @glenthemes [2023]
  183.         💌 gitlab.com/glen-npf/v4-beta
  184. --->
  185.  
  186. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  187.  
  188. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  189. <style>
  190. :root {
  191. --NPF-Images-Spacing:1px;
  192. --NPF-Caption-Spacing:1em;
  193. --NPF-Move-1st-Photoset:"no";
  194. --Text-Container-Selector:".caption";
  195. --Text-Reblogs-Selector:".tumblr_parent";
  196. }
  197. </style>
  198.  
  199. <!-- Inline Images Resizing Script -->
  200.  
  201. <script>
  202. $(".tmblr-full, figure").each(function(){
  203. var imgWidth = $(this).attr("data-orig-width"),
  204. img = $(this).find("img"),
  205. imgSrc = img.attr("src");
  206. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  207. if (imgWidth >= 500){
  208. img.attr("src",imgSrc.replace("_500.","_1280."));
  209. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  210. }
  211. });  
  212. </script>
  213.  
  214. <!-- PXU Script -->
  215.  
  216. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  217.  
  218. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  219.  
  220. <script>
  221. $(document).ready(function(){
  222. $('.photo-slideshow').pxuPhotoset({
  223. lightbox: true,
  224. rounded: false,
  225. gutter: '1px',
  226. borderRadius: '0px',
  227. photoset: '.photo-slideshow',
  228. photoWrap: '.photo-data',
  229. photo: '.pxu-photo'
  230. });
  231. });
  232. </script>
  233.  
  234. <!-- Responsive Tumblr Videos Script -->
  235.  
  236. <script src="//cdn.jsdelivr.net/gh/robinpx/tumblr@master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  237.  
  238. <script>
  239. $(document).ready(function() {
  240. flexibleFrames($(".video"));  
  241. });
  242. </script>
  243.  
  244. <style type="text/css">
  245.  
  246. .tmblr-iframe--app-cta-button {
  247. display: none!important;
  248. }
  249.  
  250. ::-webkit-scrollbar-thumb:vertical {
  251. background: {color:Scrollbar};
  252. }
  253.  
  254. ::-webkit-scrollbar {
  255. width: 1px;
  256. }
  257.  
  258. ::selection {
  259. background: {color:Main Color One};
  260. color: white;
  261. }
  262.  
  263. ::-moz-selection {
  264. background: {color:Main Color one};
  265. color: white;
  266. }
  267.  
  268. #s-m-t-tooltip {
  269. background: {color:Tooltip Background};
  270. border-radius: 5px;
  271. color: {color:Tooltip Color};
  272. font-size: {select:Uppercase Font Size};
  273. margin-top: 30px;
  274. padding: 5px;
  275. text-align: center;
  276. text-transform: uppercase;
  277. z-index: 999999999999999999999999999999999999;
  278. }
  279.  
  280. body {
  281. background: {color:Background};
  282. color: {color:Text};
  283. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  284. font-family: '{select:Body Font}', sans-serif;
  285. font-size: {select:Body Font Size};
  286. font-style: normal;
  287. font-weight: 400;
  288. hyphens: auto;
  289. letter-spacing: 1px;
  290. margin: 0px;
  291. text-align: left;
  292. text-transform: none;
  293. word-wrap: break-word;
  294. }
  295.  
  296. a {
  297. color: {color:Link};
  298. text-decoration: none;
  299. -webkit-transition: all 0.5s ease;
  300. -moz-transition: all 0.5s ease;
  301. -o-transition: all 0.5s ease;
  302. }
  303.  
  304. a:hover {
  305. color: {color:Link Hover};
  306. }
  307.  
  308. b {
  309. font-weight: 700;
  310. }
  311.  
  312. h1 {
  313. font-family: 'Playfair Display', serif;
  314. font-size: 1.2rem;
  315. font-weight: bold;
  316. margin-block-start: 0em;
  317. text-transform: lowercase;
  318. }
  319.  
  320. h2 {
  321. font-family: 'Rubik', sans-serif;
  322. font-size: 1rem;
  323. font-weight: bold;
  324. margin-block-start: 0em;
  325. }
  326.  
  327. blockquote {
  328. border-left: 1px solid {color:Border};
  329. margin: 5px;
  330. padding-left: 5px;
  331. }
  332.  
  333. blockquote img {
  334. height: auto;
  335. max-width: 100%;
  336. }
  337.  
  338. blockquote blockquote {
  339. border-left: 1px solid {color:Border};
  340. padding-left: 5px;
  341. }
  342.  
  343. pre {
  344. background: #f8f8f8;
  345. border-radius: 5px;
  346. padding: 10px;
  347. word-wrap: break-all;
  348. white-space: pre-wrap;
  349. }
  350.  
  351. #ghost-wrapper {
  352. bottom: 20px;
  353. height: 200px;
  354. position: fixed;
  355. right: 20px;
  356. width: 190px;
  357. z-index: 1;
  358. }
  359.  
  360. #ghost {
  361. height: 200px;
  362. position: fixed;
  363. width: 190px;
  364. -webkit-transition: all 0.5s ease;
  365. -moz-transition: all 0.5s ease;
  366. -o-transition: all 0.5s ease;
  367. }
  368.  
  369. #ghost:hover {
  370. opacity: 0.7;
  371. }
  372.  
  373. .ghost-main {
  374. background: {color:Ghost Color};
  375. border-radius: 100px;
  376. height: 150px;
  377. margin-left: 20px;
  378. position: absolute;
  379. width: 150px;
  380. }
  381.  
  382. .ghost-eye-left {
  383. background: {color:Ghost EM};
  384. border-radius: 100%;
  385. height: 5px;
  386. margin-top: 50px;
  387. margin-left: 65px;
  388. position: absolute;
  389. width: 15px;
  390. z-index: 1;
  391. }
  392.  
  393. .ghost-eye-right {
  394. background: {color:Ghost EM};
  395. border-radius: 100%;
  396. height: 5px;
  397. margin-top: 50px;
  398. margin-left: 105px;
  399. position: absolute;
  400. width: 15px;
  401. z-index: 1;
  402. }
  403.  
  404. .ghost-mouth {
  405. background: {color:Ghost EM};
  406. border-radius: 100%;
  407. height: 10px;
  408. margin-top: 55px;
  409. margin-left: 90px;
  410. position: absolute;
  411. width: 10px;
  412. z-index: 1;
  413. }
  414.  
  415. .ghost-hand-left {
  416. background: {color:Ghost Color};
  417. border-radius: 50px 100px 50px 100px;
  418. height: 30px;
  419. margin-left: 0px;
  420. margin-top: 75px;
  421. position: absolute;
  422. width: 40px;
  423. z-index: 1;
  424. }
  425.  
  426. .ghost-hand-right {
  427. background: {color:Ghost Color};
  428. border-radius: 100px 50px 100px 50px;
  429. height: 30px;
  430. margin-left: 150px;
  431. margin-top: 75px;
  432. position: absolute;
  433. width: 40px;
  434. z-index: 1;
  435. }
  436.  
  437. .coattails-one {
  438. background: {color:Ghost Color};
  439. border-radius: 100px;
  440. height: 150px;
  441. margin-left: 20px;
  442. margin-top: 50px;
  443. position: absolute;
  444. width: 56.25px;
  445. }
  446.  
  447. .coattails-two {
  448. background: {color:Ghost Color};
  449. border-radius: 100px;
  450. height: 150px;
  451. margin-left: 49px;
  452. margin-top: 50px;
  453. position: absolute;
  454. width: 56.25px;
  455. }
  456.  
  457. .coattails-three {
  458. background: {color:Ghost Color};
  459. border-radius: 100px;
  460. height: 150px;
  461. margin-left: 79.75px;
  462. margin-top: 50px;
  463. position: absolute;
  464. width: 56.25px;
  465. }
  466.  
  467. .coattails-four {
  468. background: {color:Ghost Color};
  469. border-radius: 100px;
  470. height: 150px;
  471. margin-left: 108.75px;
  472. margin-top: 50px;
  473. position: absolute;
  474. width: 56.25px;
  475. }
  476.  
  477. #bubble-wrapper {
  478. display: none;
  479. }
  480.  
  481. .bubble {
  482. background: {color:Bubble Background};
  483. border: 1px solid {color:Bubble Border};
  484. border-radius: 5px;
  485. bottom: 220px;
  486. color: {color:Bubble Color};
  487. font-size: {select:Uppercase Font Size};
  488. font-style: normal;
  489. height: 75px;
  490. hyphens: auto;
  491. letter-spacing: 1px;
  492. overflow-y: scroll;
  493. padding: 20px;
  494. position: absolute;
  495. z-index: 1;
  496. text-align: center;
  497. text-transform: uppercase;
  498. width: 148px;
  499. word-wrap: break-all;
  500. }
  501.  
  502. #ui-wrapper {
  503. align-items: center;
  504. background: {color:UI Background};
  505. display: flex;
  506. flex-direction: column;
  507. height: 100%;
  508. left: 0px;
  509. justify-content: center;
  510. position: fixed;
  511. top: 0px;
  512. width: 350px;
  513. z-index: 1;
  514. }
  515.  
  516. #user-information {
  517. background: {color:Sidebar Background};
  518. border-radius: 5px;
  519. position: absolute;
  520. padding: 20px;
  521. width: 250px;
  522. }
  523.  
  524. .icon-image {
  525. height: 120px;
  526. margin-left: auto;
  527. margin-right: auto;
  528. width: 120px;
  529. }
  530.  
  531. .icon-image img {
  532. border-radius: 100px;
  533. height: 120px;
  534. width: 120px;
  535. }
  536.  
  537. .modal-icon i {
  538. border-radius: 100px;
  539. background: {color:Main Color One};
  540. color: {color:Post Background};
  541. display: inline-block;
  542. font-size: 0.9rem;
  543. font-variant: normal;
  544. height: 0.9rem;
  545. line-height: 1;
  546. margin-left: 87.2px;
  547. margin-top: -32.8px;
  548. padding: 10px;
  549. position: absolute;
  550. text-align: center;
  551. text-rendering: auto;
  552. transition: 0.3s;
  553. width: 0.9rem;
  554. -webkit-transition: all 0.5s ease;
  555. -moz-transition: all 0.5s ease;
  556. -o-transition: all 0.5s ease;
  557. }
  558.  
  559. .modal-icon i:hover {
  560. background: {color:Post Background};
  561. color: {color:Link};
  562. }
  563.  
  564. .modal {
  565. background: rgba({RGBcolor:Post Background}, 0.5);
  566. display: none;
  567. height: 100%;
  568. left: 0px;
  569. overflow: auto;
  570. position: fixed;
  571. top: 0px;
  572. width: 100%;
  573. z-index: 999999999999999999999999999999999999;
  574. }
  575.  
  576. .modal-content {
  577. background: {color:Post Background};
  578. border: 1px solid {color:Border};
  579. border-radius: 5px;
  580. margin-bottom: 100px;
  581. margin-left: auto;
  582. margin-right: auto;
  583. margin-top: 100px;
  584. padding: 20px;
  585. width: 500px;
  586. z-index: 1;
  587. }
  588.  
  589. .close-modal {
  590. font-size: 0.9rem;
  591. float: right;
  592. right: 20px;
  593. top: 20px;
  594. -webkit-transition: all 0.5s ease;
  595. -moz-transition: all 0.5s ease;
  596. -o-transition: all 0.5s ease;
  597. }
  598.  
  599. .close-modal:hover {
  600. color: {color:Link Hover};
  601. }
  602.  
  603. @keyframes animatetop {
  604.  
  605. from {
  606. opacity: 0;
  607. }
  608.  
  609. to {
  610. top: 0px;
  611. opacity: 1;
  612. }
  613.  
  614. }
  615.  
  616. .movies-icon {
  617. margin-top: 34px;
  618. text-align: center;
  619. }
  620.  
  621. .movies-title {
  622. color: {color:Text};
  623. font-family: 'Rubik', sans-serif;
  624. font-weight: bold;
  625. margin-top: 20px;
  626. text-align: center;
  627. text-transform: uppercase;
  628. }
  629.  
  630. .movies {
  631. display: flex;
  632. flex-direction: row;
  633. flex-wrap: wrap;
  634. margin: -5px;
  635. margin-top: 20px;
  636. width: 510px;
  637. }
  638.  
  639. .movies li {
  640. background: {color:Sidebar Background};
  641. border-radius: 5px;
  642. color: {color:Description};
  643. font-size: {select:Uppercase Font Size};
  644. list-style-type: none;
  645. margin: 5px;
  646. padding: 10px;
  647. text-transform: uppercase;
  648. width: 225px;
  649. }
  650.  
  651. .title {
  652. color: {color:Main Color One};
  653. font-family: 'Rubik', sans-serif;
  654. font-weight: bold;
  655. margin-top: 30px;
  656. text-align: center;
  657. text-transform: uppercase;
  658. }
  659.  
  660. .subtitle {
  661. font-size: {select:Uppercase Font Size};
  662. font-style: italic;
  663. color: {color:Description};
  664. text-align: center;
  665. text-transform: uppercase;
  666. }
  667.  
  668. .tabcontent {
  669. animation: fadeEffect 1s;
  670. display: none;
  671. height: auto;
  672. margin-top: 15px;
  673. }
  674.  
  675. @-webkit-keyframes fadeEffect {
  676. from {
  677. opacity: 0;
  678. }
  679.  
  680. to {
  681. opacity: 1;
  682. }
  683. }
  684.  
  685. @keyframes fadeEffect {
  686. from {
  687. opacity: 0;
  688. }
  689.  
  690. to {
  691. opacity: 1;
  692. }
  693. }
  694.  
  695. .description {
  696. color: {color:Description};
  697. font-size: {select:Uppercase Font Size};
  698. text-align: center;
  699. text-transform: uppercase;
  700. }
  701.  
  702. .description a {
  703. color: {color:Description Link};
  704. }
  705.  
  706. .description a:hover {
  707. color: {color:Link Hover};
  708. }
  709.  
  710. .links {
  711. font-size: {select:Uppercase Font Size};
  712. margin: -5px;
  713. text-align: center;
  714. text-transform: uppercase;
  715. width: calc(100% + 10px);
  716. }
  717.  
  718. .links a {
  719. background: {color:Main Color One};
  720. border-radius: 5px;
  721. color: {color:Post Background};
  722. display: inline-block;
  723. margin: 5px;
  724. padding: 5px;
  725. }
  726.  
  727. .links a:hover {
  728. color: {color:Link Hover};
  729. }
  730.  
  731. .updates {
  732. align-items: center;
  733. display: flex;
  734. margin-bottom: 15px;
  735. }
  736.  
  737. .updates-icon {
  738. width: 34.39px;
  739. }
  740.  
  741. .uduc-wrapper {
  742. margin-left: 10px;
  743. }
  744.  
  745. .updates-date {
  746. color: {color:Main Color One};
  747. font-size: {select:Uppercase Font Size};
  748. text-transform: uppercase;
  749. }
  750.  
  751. .updates-content {
  752. color: {color:Description};
  753. font-size: {select:Uppercase Font Size};
  754. text-transform: uppercase;
  755. }
  756.  
  757. .updates-content a {
  758. color: {color:Description Link};
  759. }
  760.  
  761. .updates-content a:hover {
  762. color: {color:Link Hover};
  763. }
  764.  
  765. .tab {
  766. background-image: linear-gradient(to right, {color:Main Color One}, {color:Main Color Two});
  767. border-bottom-left-radius: 5px;
  768. border-bottom-right-radius: 5px;
  769. margin: -20px;
  770. margin-top: 15px;
  771. padding: 10px;
  772. text-align: center;
  773. width: calc(100% + 20px);
  774. }
  775.  
  776. .tab a {
  777. border-radius: 100px;
  778. color: {color:Post Background};
  779. display: inline-block;
  780. font-size: 0.9rem;
  781. font-variant: normal;
  782. height: 0.9rem;
  783. line-height: 1;
  784. margin: 5px;
  785. padding: 10px;
  786. text-rendering: auto;
  787. transition: 0.3s;
  788. width: 0.9rem;
  789. }
  790.  
  791. .tab a:hover {
  792. background: {color:Post Background};
  793. color: {color:Main Color One};
  794. }
  795.  
  796. .tab a.active {
  797. background: {color:Post Background};
  798. color: {color:Main Color One};
  799. }
  800.  
  801. #container {
  802. margin-bottom: 100px;
  803. margin-left: 350px;
  804. margin-top: 100px;
  805. width: calc(100% - 350px);
  806. }
  807.  
  808. #posts {
  809. margin-left: auto;
  810. margin-right: auto;
  811. width: 522px;
  812. }
  813.  
  814. .entries {
  815. margin-bottom: 50px;
  816. width: 522px;
  817. }
  818.  
  819. .entries-wrapper {
  820. background: {color:Post Background};
  821. border: 1px solid {color:Border};
  822. border-radius: 5px;
  823. padding: 10px;
  824. width: 500px;
  825. }
  826.  
  827. .entries img {
  828. height: auto;
  829. max-width: 100%;
  830. }
  831.  
  832. .npf_row img {
  833. width: 100%;
  834. }
  835.  
  836. .tmblr-full {
  837. margin-bottom: 10px;
  838. }
  839.  
  840. .npf_inst {
  841. margin-bottom: 20px;
  842. }
  843.  
  844. .npf-wrapper {
  845. margin: 0px;
  846. }
  847.  
  848. .npf-wrapper .tmblr-full {
  849. display: flex;
  850. }
  851.  
  852. .text-wrapper {
  853. margin: 0px;
  854. }
  855.  
  856. .read_more {
  857. background: {color:Main Color};
  858. border: 1px solid {color:Border};
  859. border-radius: 5px;
  860. color: white;
  861. display: inline-block;
  862. font-size: {select:Uppercase Font Size};
  863. padding: 10px;
  864. text-align: center;
  865. text-transform: uppercase;
  866. width: calc(100% - 22px);
  867. }
  868.  
  869. .read_more:hover {
  870. background: white;
  871. color: {color:Main Color One};
  872. }
  873.  
  874. .vignette, #vignette {
  875. opacity: 0;
  876. }
  877.  
  878. .lightbox-image, #tumblr_lightbox img {
  879. border-radius: 0!important;
  880. box-shadow: none!important;
  881. max-width: none;
  882. }
  883.  
  884. .tmblr-lightbox, #tumblr_lightbox {
  885. background-attachment: fixed;
  886. background-image: url('https://i.imgur.com/7wF2zbK.png');
  887. background-repeat: repeat;
  888. }
  889.  
  890. .lightbox-caption, #tumblr_lightbox_caption {
  891. visibility: hidden;
  892. }
  893.  
  894. .text p {
  895. margin-top: 0px;
  896. }
  897.  
  898. .caption {
  899. margin-top: 20px;
  900. }
  901.  
  902. .caption p {
  903. margin-top: 0px;
  904. }
  905.  
  906. blockquote.tumblr_parent {
  907. border: none;
  908. border-bottom: 1px solid {color:Border};
  909. margin: 0px;
  910. margin-bottom: 20px;
  911. padding: 0px;
  912. }
  913.  
  914. blockquote.tumblr_parent:last-child {
  915. border-bottom: 0px;
  916. }
  917.  
  918. blockquote.user-reblog {
  919. border: none;
  920. margin: 0px;
  921. padding: 0px;
  922. }
  923.  
  924. .tumblr_avatar {
  925. border-radius: 100px;
  926. height: 30px;
  927. margin-bottom: 20px;
  928. width: 30px;
  929. }
  930.  
  931. .tumblr_avatar img {
  932. height: 30px;
  933. width: 30px;
  934. }
  935.  
  936. .user-image img {
  937. height: 30px;
  938. width: 30px;
  939. }
  940.  
  941. a.tumblr_blog {
  942. font-size: {select:Body Font Size};
  943. font-weight: bold;
  944. margin-top: calc((30px - {select:Body Font Size}) / 4);
  945. display: inline-block;
  946. position: absolute;
  947. margin-left: 10px;
  948. text-align: center;
  949. text-transform: lowercase;
  950. }
  951.  
  952. .ask-wrapper {
  953. width: 100%;
  954. }
  955.  
  956. .asker-wrapper {
  957. overflow: auto;
  958. width: 100%;
  959. }
  960.  
  961. .asker-question {
  962. border: 1px solid {color:Border};
  963. border-radius: 5px;
  964. font-size: {select:Uppercase Font Size};
  965. padding: 10px;
  966. padding-bottom: 27.195px;
  967. text-transform: uppercase;
  968. }
  969.  
  970. .asker-question p {
  971. margin-block-start: 0em;
  972. }
  973.  
  974. .asker-question p:last-of-type {
  975. margin-block-end: 0em;
  976. }
  977.  
  978. .asker-icon {
  979. background: {color:Chat Even Background};
  980. border-radius: 100px;
  981. display: inline-block;
  982. float: left;
  983. font-size: {select:Uppercase Font Size};
  984. margin-left: 10px;
  985. margin-top: -17.195px;
  986. padding-right: 10px;
  987. text-transform: uppercase;
  988. }
  989.  
  990. .quote-wrapper {
  991. width: 100%;
  992. }
  993.  
  994. .quote-icon {
  995. background: {color:Chat Even Background};
  996. border-radius: 100px;
  997. color: {color:Main Color One};
  998. font-size: 0.9rem;
  999. height: 0.9rem;
  1000. margin-left: auto;
  1001. margin-right: auto;
  1002. margin-top: -17.195px;
  1003. padding: 10px;
  1004. width: 0.9rem;
  1005. }
  1006.  
  1007. .quote {
  1008. border: 1px solid {color:Border};
  1009. border-radius: 5px;
  1010. font-family: 'Playfair Display', serif;
  1011. font-size: 1.2rem;
  1012. font-weight: bold;
  1013. padding: 10px;
  1014. padding-bottom: 26.4px;
  1015. text-align: center;
  1016. }
  1017.  
  1018. .quote a.tumblr_blog {
  1019. font-size: {select:Uppercase Font Size};
  1020. font-weight: normal;
  1021. margin-top: 0px;
  1022. margin-left: 0px;
  1023. display: inline-block;
  1024. position: relative;
  1025. text-align: center;
  1026. text-transform: uppercase;
  1027. }
  1028.  
  1029. .website {
  1030. background: {color:Main Color One};
  1031. color: {color:Post Background};
  1032. font-size: {select:Uppercase Font Size};
  1033. padding: 10px;
  1034. text-transform: uppercase;
  1035. }
  1036.  
  1037. .website a {
  1038. color: {color:Post Background};
  1039. }
  1040.  
  1041. .website a:hover {
  1042. color: {color:Link Hover};
  1043. }
  1044.  
  1045. .chat {
  1046. font-size: {select:Uppercase Font Size};
  1047. text-transform: uppercase;
  1048. }
  1049.  
  1050. .chat li {
  1051. list-style-type: none;
  1052. }
  1053.  
  1054. .chat li:nth-child(odd) {
  1055. background: {color:Main Color One};
  1056. color: {color:Post Background};
  1057. padding: 10px;
  1058. }
  1059.  
  1060. .chat li:nth-child(even) {
  1061. background: {color:Chat Even Background};
  1062. color: {color:Main Color One};
  1063. padding: 10px;
  1064. }
  1065.  
  1066. .audio iframe {
  1067. height: 85px;
  1068. width: 100%;
  1069. }
  1070.  
  1071. /** spotify fix by glenthemes **/
  1072.  
  1073. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  1074. height: 85px!important;
  1075. margin-bottom: 0px;
  1076. }
  1077.  
  1078. figure {
  1079. display: flex;
  1080. width: 100%;
  1081. }
  1082.  
  1083. figcaption.npf-audio-wrapper {
  1084. width: 100%;
  1085. }
  1086.  
  1087. .npf-audio-wrapper {
  1088. --NPF-Audio-Buttons-Size: 1.4rem;
  1089. --NPF-Audio-Buttons-Color: #555555;
  1090. --NPF-Audio-Buttons-Spacing: 1.3rem;
  1091. --NPF-Audio-Image-Size: 85px;
  1092. --NPF-Audio-Image-Spacing: 0px;
  1093. }
  1094.  
  1095. span.npf-audio-title {
  1096. font-weight: bold;
  1097. }
  1098.  
  1099. .npf-audio-background {
  1100. background-color: #f2f2f2;
  1101. padding: 1.5rem;
  1102. }
  1103.  
  1104. video {
  1105. height: auto;
  1106. width: 100%;
  1107. }
  1108.  
  1109. .source {
  1110. background: {color:Chat Even Background};
  1111. border-radius: 5px;
  1112. display: inline-block;
  1113. font-size: {select:Uppercase Font Size};
  1114. margin-top: 10px;
  1115. padding: 5px;
  1116. text-transform: uppercase;
  1117. }
  1118.  
  1119. .pinned-post {
  1120. background: {color:Pin};
  1121. border-radius: 5px;
  1122. color: {color:Post Background};
  1123. font-size: {select:Uppercase Font Size};
  1124. margin-bottom: 20px;
  1125. padding: 10px;
  1126. text-transform: uppercase;
  1127. }
  1128.  
  1129. .vsd {
  1130. border-bottom: 1px solid {color:Border};
  1131. font-size: {select:Uppercase Font Size};
  1132. margin: -10px;
  1133. margin-bottom: 10px;
  1134. overflow: auto;
  1135. padding: 10px;
  1136. text-transform: uppercase;
  1137. }
  1138.  
  1139. .pslr {
  1140. border-top: 1px solid {color:Border};
  1141. font-size: {select:Uppercase Font Size};
  1142. margin: -10px;
  1143. margin-top: 10px;
  1144. padding: 10px;
  1145. overflow: auto;
  1146. text-transform: uppercase;
  1147. }
  1148.  
  1149. .post-notes {
  1150. display: inline-block;
  1151. }
  1152.  
  1153. .like-b {
  1154. display: inline-block;
  1155. margin-right: 10px;
  1156. position: relative;
  1157. }
  1158.  
  1159. .like-b .like_button iframe {
  1160. bottom: 0px;
  1161. left: 0px;
  1162. opacity: 0;
  1163. position: absolute;
  1164. right: 0px;
  1165. top: 0px;
  1166. }
  1167.  
  1168. .like-b .liked + .b {
  1169. color: {color:Like};
  1170. }
  1171.  
  1172. .tags-notes {
  1173. font-size: {select:Uppercase Font Size};
  1174. margin-top: 20px;
  1175. text-align: center;
  1176. text-transform: uppercase;
  1177. }
  1178.  
  1179. .tags-title {
  1180. background: {color:Main Color One};
  1181. border-radius: 100px;
  1182. color: {color:Post Background};
  1183. display: inline-block;
  1184. padding: 5px;
  1185. }
  1186.  
  1187. .tags-title a {
  1188. -webkit-transition: all 0.5s ease;
  1189. -moz-transition: all 0.5s ease;
  1190. -o-transition: all 0.5s ease;
  1191. }
  1192.  
  1193. .tags-title:hover {
  1194. color: {color:Link Hover};
  1195. }
  1196.  
  1197. .tags {
  1198. margin-top: 10px;
  1199. text-transform: uppercase;
  1200. }
  1201.  
  1202. .tags-alternate {
  1203. font-size: {select:Uppercase Font Size};
  1204. text-transform: uppercase;
  1205. }
  1206.  
  1207. ol.notes {
  1208. background: {color:Post Background};
  1209. border: 1px solid {color:Border};
  1210. border-radius: 5px;
  1211. font-size: {select:Uppercase Font Size};
  1212. margin-top: 20px;
  1213. padding: 0px;
  1214. text-align: left;
  1215. text-transform: uppercase;
  1216. }
  1217.  
  1218. ol.notes li {
  1219. list-style-type: none;
  1220. margin: 10px;
  1221. }
  1222.  
  1223. ol.notes li.note img.avatar {
  1224. border-radius: 100px;
  1225. vertical-align: -4px;
  1226. height: 16px;
  1227. margin-right: 10px;
  1228. width: 16px;
  1229. }
  1230.  
  1231. .more_notes_link {
  1232. background: {color:Main Color};
  1233. border-radius: 5px;
  1234. color: white;
  1235. display: inline-block;
  1236. padding: 5px 10px 5px 10px;
  1237. text-align: center;
  1238. }
  1239.  
  1240. .pagination {
  1241. align-items: baseline;
  1242. display: flex;
  1243. font-size: {select:Uppercase Font Size};
  1244. justify-content: space-between;
  1245. text-align: center;
  1246. text-transform: uppercase;
  1247. }
  1248.  
  1249. .navigation {
  1250. align-self: baseline;
  1251. display: flex;
  1252. }
  1253.  
  1254. .navigation a {
  1255. background: {color:Main Color One};
  1256. border: 1px solid {color:Main Color One};
  1257. border-radius: 5px;
  1258. color: {color:Post Background};
  1259. padding: 5px;
  1260. }
  1261.  
  1262. .navigation a:hover {
  1263. background: {color:Post Background};
  1264. color: {color:Main Color One};
  1265. }
  1266.  
  1267. .pages {
  1268. background: {color:Main Color One};
  1269. border: 1px solid {color:Main Color One};
  1270. border-radius: 5px;
  1271. color: {color:Post Background};
  1272. align-self: baseline;
  1273. display: flex;
  1274. padding: 5px;
  1275. }
  1276.  
  1277. #credit {
  1278. bottom: 15px;
  1279. font-size: 0.7rem;
  1280. position: fixed;
  1281. right: 15px;
  1282. text-transform: uppercase;
  1283. }
  1284.  
  1285. #credit a {
  1286. color: {color:Link};
  1287. }
  1288.  
  1289. #credit a:hover {
  1290. color: {color:Link Hover};
  1291. }
  1292.  
  1293. {CustomCSS}
  1294.    
  1295. </style>
  1296.    
  1297. </head>
  1298.  
  1299. <body>
  1300.  
  1301. {block:IfGhostBubble}
  1302. <div id="ghost-wrapper">
  1303.  
  1304. <div id="ghost">
  1305.  
  1306. <a onclick="myFunction()" title="Boo">
  1307.  
  1308. <div class="ghost-main"></div>
  1309.  
  1310. <div class="ghost-eye-left"></div>
  1311.  
  1312. <div class="ghost-eye-right"></div>
  1313.  
  1314. <div class="ghost-hand-left"></div>
  1315.  
  1316. <div class="ghost-hand-right"></div>
  1317.  
  1318. <div class="ghost-mouth"></div>
  1319.  
  1320. <div class="coattails-one"></div>
  1321.  
  1322. <div class="coattails-two"></div>
  1323.  
  1324. <div class="coattails-three"></div>
  1325.  
  1326. <div class="coattails-four"></div>
  1327.  
  1328. </a>
  1329.  
  1330. </div>
  1331.  
  1332. <div id="bubble-wrapper">
  1333.  
  1334. <div class="bubble">
  1335. CSS Ghost inspired by Louie Zong. Listen to <i>Ghost Choir</i> <a href="https://www.youtube.com/watch?v=kXF3VYYa5TI">here</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  1336. </div>
  1337.  
  1338. </div>
  1339.  
  1340. </div>
  1341. {/block:IfGhostBubble}
  1342.  
  1343. <div id="ui-wrapper">
  1344.    
  1345. <div id="user-information">
  1346.  
  1347. <div class="icon-image">
  1348.  
  1349. <img src="{image:Icon Image}"/>
  1350.  
  1351. {block:IfWatchlist}
  1352. <div class="modal-icon"><a class="open-modal" title="Watchlist"><i class="fas fa-broom"></i></a></div>
  1353. {/block:IfWatchlist}
  1354.  
  1355. </div>
  1356.  
  1357. <div class="title">{text:Title}</div>
  1358.  
  1359. <div class="subtitle">{text:Subtitle}</div>
  1360.  
  1361. <!-- Start of Tab -->
  1362.  
  1363. <div id="one" class="tabcontent">
  1364.  
  1365. {block:Description}<div class="description">{Description}</div>{/block:Description}
  1366.  
  1367. </div>
  1368.  
  1369. <!-- End of Tab -->
  1370.  
  1371. <!-- Start of Tab -->
  1372.  
  1373. <div id="two" class="tabcontent">
  1374.  
  1375. <div class="links">
  1376. {block:SubmissionsEnabled}{block:IfSubmitLink}<a href="/submit">Submit</a>{/block:IfSubmitLink}{/block:SubmissionsEnabled}
  1377. {block:ifLink1URL}<a href="{text:Link 1 URL}">{text:Link 1 Name}</a>{/block:ifLink1URL}
  1378. {block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
  1379. {block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
  1380. {block:ifLink4URL}<a href="{text:Link 4 URL}">{text:Link 4 Name}</a>{/block:ifLink4URL}
  1381. {block:ifLink5URL}<a href="{text:Link 5 URL}">{text:Link 5 Name}</a>{/block:ifLink5URL}
  1382. {block:ifLink6URL}<a href="{text:Link 6 URL}">{text:Link 6 Name}</a>{/block:ifLink6URL}
  1383. {block:ifLink7URL}<a href="{text:Link 7 URL}">{text:Link 7 Name}</a>{/block:ifLink7URL}
  1384. <a href="/archive">Archive</a>
  1385. </div>
  1386.  
  1387. </div>
  1388.  
  1389. <!-- End of Tab -->
  1390.  
  1391. <!-- Start of Tab -->
  1392.  
  1393. <div id="three" class="tabcontent">
  1394.  
  1395. {block:ifUpdate1}
  1396. <div class="updates">
  1397. <div class="updates-icon"><i class="far fa-clock" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i></div>
  1398. <div class="uduc-wrapper">
  1399. <div class="updates-date">{text:Update Date 1}</div>
  1400. <div class="updates-content">{text:Update 1}</div>
  1401. </div>
  1402. </div>
  1403. {/block:ifUpdate1}
  1404.  
  1405. {block:ifUpdate2}
  1406. <div class="updates">
  1407. <div class="updates-icon"><i class="far fa-clock" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i></div>
  1408. <div class="uduc-wrapper">
  1409. <div class="updates-date">{text:Update Date 2}</div>
  1410. <div class="updates-content">{text:Update 2}</div>
  1411. </div>
  1412. </div>
  1413. {/block:ifUpdate2}
  1414.  
  1415. {block:ifUpdate3}
  1416. <div class="updates">
  1417. <div class="updates-icon"><i class="far fa-clock" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i></div>
  1418. <div class="uduc-wrapper">
  1419. <div class="updates-date">{text:Update Date 3}</div>
  1420. <div class="updates-content">{text:Update 3}</div>
  1421. </div>
  1422. </div>
  1423. {/block:ifUpdate3}
  1424.  
  1425. </div>
  1426.  
  1427. <!-- End of Tab -->
  1428.  
  1429. <div class="tab">
  1430. <a href="/" title="Home"><i class="far fa-arrow-alt-circle-left"></i></a>
  1431. {block:AskEnabled}<a href="/ask" title="Ask"><i class="far fa-envelope" style="vertical-align: center;"></i></a>{/block:AskEnabled}
  1432. <a class="tablinks" onclick="openPanel(event, 'one')" id="defaultOpen" title="About"><i class="far fa-user-circle"></i></a>
  1433. <a class="tablinks" onclick="openPanel(event, 'two')" id="defaultOpen" title="Navigation"><i class="fas fa-list-ul"></i></a>
  1434. <a class="tablinks" onclick="openPanel(event, 'three')" id="defaultOpen" title="Updates"><i class="far fa-clock"></i></a>
  1435. </div>
  1436.  
  1437. </div>
  1438.  
  1439. </div>
  1440.  
  1441. <div class="modal modal_multi">
  1442.  
  1443. <div class="modal-content">
  1444.  
  1445. <div class="close-modal close_modal"><i class="far fa-times-circle"></i></div>
  1446.  
  1447. <div class="movies-icon"><i class="fas fa-cat" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i></div>
  1448.  
  1449. <div class="movies-title">My 2020 Halloween Watchlist</div>
  1450.  
  1451. <div class="movies">
  1452. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Coraline</li>
  1453. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Corpse Bride</li>
  1454. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Hocus Pocus</li>
  1455. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Trick'r Treat</li>
  1456. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Movie Title</li>
  1457. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Movie Title</li>
  1458. <li><i class="fas fa-video" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Movie Title</li>
  1459. </div>
  1460.  
  1461. </div>
  1462.  
  1463. </div>
  1464.  
  1465. <div id="container">
  1466.  
  1467. <div id="posts">
  1468.  
  1469. {block:Posts}
  1470.  
  1471. <div class="entries" id="{PostID}" post-type="{PostType}">
  1472.  
  1473. {block:PinnedPostLabel}
  1474. <div class="pinned-post">
  1475. <i class="fas fa-star" style="margin-right: 5px;"></i>{PinnedPostLabel}
  1476. </div>
  1477. {/block:PinnedPostLabel}
  1478.  
  1479. <div class="entries-wrapper">
  1480.  
  1481. {block:Date}
  1482. <div class="vsd">
  1483. {block:RebloggedFrom}<i class="fas fa-sync-alt" style="margin-right: 5px;"></i><a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom}  
  1484. {block:ContentSource}{block:RebloggedFrom}(<i class="far fa-folder" style="margin-right: 5px;"></i><a href="{ReblogRootURL}">Source</a>){/block:RebloggedFrom}{/block:ContentSource}
  1485. <font style="float: right;">
  1486. <a href="{Permalink}"><i class="far fa-clock" style="color: {color:Text};margin-right: 5px;"></i>{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a>
  1487. </font>
  1488. </div>
  1489. {block:Date}
  1490.  
  1491. {block:Text}
  1492. {block:NotReblog}
  1493. <div class="npf-wrapper">
  1494. {block:Title}
  1495. <h1>{Title}</h1>
  1496. {/block:Title}
  1497. {Body}
  1498. </div>
  1499. {/block:NotReblog}
  1500. {block:RebloggedFrom}
  1501. <div class="text-wrapper">
  1502. {block:Title}
  1503. <h1>{Title}</h1>
  1504. {/block:Title}
  1505. <div class="text">
  1506. {Body}
  1507. </div>
  1508. </div>
  1509. {/block:RebloggedFrom}
  1510. {/block:Text}
  1511.  
  1512. {block:Answer}
  1513. <div class="ask-wrapper">
  1514. <div class="asker-wrapper">
  1515. <div class="asker-question">
  1516. {Question}
  1517. </div>
  1518. <div class="asker-icon">
  1519. <i class="far fa-question-circle" style="background: {color:Main Color One};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i><a href="{AskerURL}">{Asker}</a>
  1520. </div>
  1521. </div>
  1522. <div class="caption">
  1523. {Answer}
  1524. </div>
  1525. </div>
  1526. {/block:Answer}
  1527.  
  1528. {block:Quote}
  1529. <div class="quote-wrapper">
  1530. <div class="quote">
  1531. "{Quote}</i>"
  1532. {block:Source}
  1533. <br><br>
  1534. <font style="font-family: '{select:Body Font}', sans-serif;font-size: {select:Uppercase Font Size};font-weight: normal;text-transform: uppercase;">
  1535. — {Source}
  1536. </font>
  1537. {/block:Source}
  1538. </div>
  1539. <div class="quote-icon"><i class="far fa-comment-dots" style="vertical-align: top;"></i></div>
  1540. </div>
  1541. {/block:Quote}
  1542.  
  1543. {block:Link}
  1544. {block:Thumbnail}
  1545. <img src="{Thumbnail}" style="margin-bottom: 10px;"/>
  1546. {/block:Thumbnail}
  1547. <div class="website"><i class="fas fa-external-link-alt" style="margin-right: 10px;"></i><a href="{URL}" target="_blank">{Name}{block:Excerpt}<br><br>{Excerpt}{/block:Excerpt}
  1548. </a></div>
  1549. {block:Description}
  1550. <div class="caption">
  1551. {Description}
  1552. </div>
  1553. {/block:Description}
  1554. {/block:Link}
  1555.  
  1556. {block:Chat}
  1557. <div class="chat">
  1558. {block:Title}
  1559. <h1>{Title}</h1>
  1560. {/block:Title}
  1561. {block:Lines}
  1562. <li>{block:Label}{Label}{/block:Label}
  1563. {Line}
  1564. </li>
  1565. {/block:Lines}
  1566. </div>
  1567. {/block:Chat}
  1568.  
  1569. {block:Audio}
  1570. <div class="audio">
  1571. {AudioEmbed}
  1572. </div>
  1573. {block:Caption}
  1574. <div class="caption">{Caption}</div>
  1575. {/block:Caption}
  1576. {/block:Audio}
  1577.  
  1578. {block:Photo}
  1579. <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-HighRes}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  1580. {block:Caption}
  1581. <div class="text-wrapper">
  1582. <div class="caption">{Caption}</div>
  1583. </div>
  1584. {/block:Caption}
  1585. {/block:Photo}
  1586.  
  1587. {block:Photoset}
  1588. <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>
  1589. {block:Caption}
  1590. <div class="text-wrapper">
  1591. <div class="caption">{Caption}</div>
  1592. </div>
  1593. {/block:Caption}
  1594. {/block:Photoset}
  1595.  
  1596. {block:Video}
  1597. <div class="video">
  1598. {Video-500}
  1599. </div>
  1600. {block:Caption}
  1601. <div class="caption">{Caption}</div>
  1602. {/block:Caption}
  1603. {/block:Video}
  1604.  
  1605. {block:ContentSource}
  1606. <div class="source">
  1607. <i class="fas fa-paper-plane" style="color: {color:Main Color One};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  1608. </div>
  1609. {/block:ContentSource}
  1610.  
  1611. {block:Date}
  1612. <div class="pslr">
  1613. {block:NoteCount}<div class="post-notes"><i class="far fa-comment-alt" style="margin-right: 5px;"></i><a href="{Permalink}">With {NoteCountWithLabel}</a></div>{/block:NoteCount}
  1614. <font style="float: right;">
  1615. <a class="like-b" href="#">{LikeButton}<div class="b"><i class="far fa-heart"></i></div></a>
  1616. <a href="{ReblogURL}" target="_blank"><i class="fas fa-undo-alt"></i></a>
  1617. </font>
  1618. </div>
  1619. {/block:Date}
  1620.  
  1621. </div>
  1622.  
  1623. {block:Date}
  1624. <div class="tags-notes">
  1625. {block:IfHideTags}
  1626. {block:HasTags}
  1627. <a class="tags-title"><i class="fas fa-ellipsis-h" style="margin-right: 5px;"></i>Show Tags</a>
  1628. <div class="tags">
  1629. {block:Tags}
  1630. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color One};margin-right: 5px;">•</font>{Tag}</a>
  1631. {/block:Tags}
  1632. </div>
  1633. {/block:HasTags}
  1634. {/block:IfHideTags}
  1635. {block:IfShowTags}
  1636. {block:HasTags}
  1637. <div class="tags-alternate">
  1638. {block:Tags}
  1639. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color One};margin-right: 5px;">•</font>{Tag}</a>
  1640. {/block:Tags}
  1641. </div>
  1642. {/block:HasTags}
  1643. {/block:IfShowTags}
  1644. {block:PostNotes}
  1645. {PostNotes}
  1646. {/block:PostNotes}
  1647. </div>
  1648. {block:Date}
  1649.  
  1650. </div>
  1651.  
  1652. {/block:Posts}
  1653.  
  1654. {block:Pagination}
  1655. <div class="pagination">
  1656. {block:PreviousPage}
  1657. <div class="navigation">
  1658. <a href="{PreviousPage}"><i class="fas fa-angle-left" style="margin-right: 5px;"></i>Prev</a>
  1659. </div>
  1660. {/block:PreviousPage}
  1661. <div class="pages">
  1662. {CurrentPage} / {TotalPages}
  1663. </div>
  1664. {block:NextPage}
  1665. <div class="navigation">
  1666. <a href="{NextPage}">Next<i class="fas fa-angle-right" style="margin-left: 5px;"></i></a>
  1667. </div>
  1668. {/block:NextPage}
  1669. </div>
  1670. {/block:Pagination}
  1671.  
  1672. </div>
  1673.  
  1674. </div>
  1675.  
  1676. <div id="credit"><a href="http://ghcstfaec.tumblr.com/" title="ghcstfaec" target="_blank">GHCST</a></div>
  1677.  
  1678. </body>
  1679.  
  1680. <!-- Show On Click Script -->
  1681.  
  1682. <script>
  1683. function myFunction() {
  1684. var x = document.getElementById("bubble-wrapper");
  1685. if (x.style.display === "none") {
  1686. x.style.display = "block";
  1687. } else {
  1688. x.style.display = "none";
  1689. }
  1690. }
  1691. </script>
  1692.  
  1693. <!-- Modal Script -->
  1694.  
  1695. <script>
  1696. var modalparent = document.getElementsByClassName("modal_multi");
  1697. var modal_btn_multi = document.getElementsByClassName("open-modal");
  1698. var span_close_multi = document.getElementsByClassName("close_modal");
  1699. function setDataIndex() {
  1700. for (i = 0; i < modal_btn_multi.length; i++)
  1701. {
  1702. modal_btn_multi[i].setAttribute('data-index', i);
  1703. modalparent[i].setAttribute('data-index', i);
  1704. span_close_multi[i].setAttribute('data-index', i);
  1705. }
  1706. }
  1707. for (i = 0; i < modal_btn_multi.length; i++)
  1708. {
  1709. modal_btn_multi[i].onclick = function() {
  1710. var ElementIndex = this.getAttribute('data-index');
  1711. modalparent[ElementIndex].style.display = "block";
  1712. };
  1713. span_close_multi[i].onclick = function() {
  1714. var ElementIndex = this.getAttribute('data-index');
  1715. modalparent[ElementIndex].style.display = "none";
  1716. };
  1717. }
  1718. window.onload = function() {
  1719. setDataIndex();
  1720. };
  1721. window.onclick = function(event) {
  1722. if (event.target === modalparent[event.target.getAttribute('data-index')]) {
  1723. modalparent[event.target.getAttribute('data-index')].style.display = "none";
  1724. }
  1725. if (event.target === modal) {
  1726. modal.style.display = "none";
  1727. }
  1728. };
  1729. var modal = document.getElementById('myModal');
  1730. var btn = document.getElementById("open-modal");
  1731. var span = modal.getElementsByClassName("close-modal")[0];
  1732. btn.onclick = function() {
  1733. modal.style.display = "block";
  1734. }
  1735. span.onclick = function() {
  1736. modal.style.display = "none";
  1737. }
  1738. </script>
  1739.  
  1740. <!-- Tabs Script -->
  1741.  
  1742. <script>
  1743. function openPanel(evt, number) {
  1744. var i, tabcontent, tablinks;
  1745. tabcontent = document.getElementsByClassName("tabcontent");
  1746. for (i = 0; i < tabcontent.length; i++) {
  1747. tabcontent[i].style.display = "none";
  1748. }
  1749. tablinks = document.getElementsByClassName("tablinks");
  1750. for (i = 0; i < tablinks.length; i++) {
  1751. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1752. }
  1753. document.getElementById(number).style.display = "block";
  1754. evt.currentTarget.className += " active";
  1755. }
  1756. document.getElementById("defaultOpen").click();
  1757. </script>
  1758.  
  1759. </html>
Advertisement
Add Comment
Please, Sign In to add comment