themesbyces

Theme — Unknown

Feb 29th, 2020 (edited)
1,787
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 33.51 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: unknown
  16. designed and coded by ghcstfaec
  17. see credits @ https://ghcstfaec.tumblr.com/credits
  18.  
  19. -->
  20.  
  21. <!-- Metadata -->
  22.  
  23. <meta name="color:Asker Background" content="#f0f0f0"/>
  24. <meta name="color:Background" content="#f8f8f8"/>
  25. <meta name="color:Border" content="#d2d2d2"/>
  26. <meta name="color:Link" content="#000000"/>
  27. <meta name="color:Link Hover" content="#cfcfcf"/>
  28. <meta name="color:Like" content="#ec6363"/>
  29. <meta name="color:Main Color" content="#ccaaaa"/>
  30. <meta name="color:Pin" content="#31a49d"/>
  31. <meta name="color:Post Background" content="#ffffff"/>
  32. <meta name="color:Question Background" content="#ffffff"/>
  33. <meta name="color:Quote Icon Color" content="#ffffff"/>
  34. <meta name="color:Scrollbar" content="#000000"/>
  35. <meta name="color:Text" content="#555555"/>
  36. <meta name="color:Tooltip Background" content="#000000"/>
  37. <meta name="color:Tooltip Color" content="#ffffff"/>
  38.  
  39. <meta name="select:Body Font" content="Karla" title="Karla"/>
  40. <meta name="select:Body Font" content="Montserrat" title="Montserrat"/>
  41. <meta name="select:Body Font" content="Muli" title="Muli"/>
  42. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  43. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  44. <meta name="select:Body Font" content="Raleway" title="Raleway"/>
  45. <meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
  46.  
  47. <meta name="select:Body Font Size" content="1rem" title="1rem"/>
  48. <meta name="select:Body Font Size" content="0.9rem" title="0.9rem"/>
  49. <meta name="select:Body Font Size" content="0.8rem" title="0.8rem"/>
  50.  
  51. <meta name="select:Uppercase Font Size" content="0.9rem" title="0.9rem"/>
  52. <meta name="select:Uppercase Font Size" content="0.8rem" title="0.8rem"/>
  53.  
  54. <meta name="image:Container Background Image" content="https://i.imgur.com/JYaCY8U.jpg"/>
  55. <meta name="image:Sidebar Background Image" content="https://i.imgur.com/rVbYBHl.png"/>
  56. <meta name="image:Image" content="https://i.imgur.com/JmiKxKv.png"/>
  57.  
  58. <meta name="text:Title" content="Unknown"/>
  59.  
  60. <meta name="text:Link 1 URL" content="/"/>
  61. <meta name="text:Link 1 Name" content="Link One"/>
  62. <meta name="text:Link 2 URL" content="/"/>
  63. <meta name="text:Link 2 Name" content="Link Two"/>
  64. <meta name="text:Link 3 URL" content="/"/>
  65. <meta name="text:Link 3 Name" content="Link Three"/>
  66. <meta name="text:Link 4 URL" content="/"/>
  67. <meta name="text:Link 4 Name" content="Link Four"/>
  68. <meta name="text:Link 5 URL" content="/"/>
  69. <meta name="text:Link 5 Name" content="Link Five"/>
  70.  
  71. <meta name="if:Pop Up" content="1"/>
  72.  
  73. <meta name="text:About Title" content="About Me"/>
  74.  
  75. <meta name="text:About" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."/>
  76.  
  77. <meta name="text:Muses Title" content="My Muses"/>
  78.  
  79. <meta name="image:Muses Image One" content="https://i.imgur.com/EuCs2sN.png"/>
  80. <meta name="image:Muses Image Two" content="https://i.imgur.com/ee6Al1l.png"/>
  81. <meta name="image:Muses Image Three" content="https://i.imgur.com/7aDCI2K.png"/>
  82. <meta name="image:Muses Image Four" content="https://i.imgur.com/PzKOaah.png"/>
  83.  
  84. <meta name="if:Submit Link" content="1"/>
  85.  
  86. <meta name="if:Hide Tags" content="0"/>
  87. <meta name="if:Show Tags" content="1"/>
  88.  
  89. <!-- Google Fonts Script -->
  90.  
  91. <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;1,400;1,700&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">
  92.  
  93. <!-- jQuery Script -->
  94.  
  95. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  96.  
  97. <!-- Styled Tooltips Script -->
  98.  
  99. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  100.  
  101. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  102.  
  103. <script>
  104. (function($){
  105. $(document).ready(function(){
  106. $("a[title], button[title]").style_my_tooltips({
  107. tip_follows_cursor:true,
  108. tip_delay_time:90,
  109. tip_fade_speed:600,
  110. attribute:"title"
  111. });
  112. });
  113. })(jQuery);
  114. </script>
  115.  
  116. <!-- Font Awesome Script -->
  117.  
  118. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  119.  
  120. <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  121.  
  122. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  123.  
  124. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  125.  
  126. <script>
  127. tumblr_npf_audio({
  128. emptyTitleText: "",
  129. emptyArtistText: "",
  130. emptyAlbumText: "",
  131. titleLabel: "",    
  132. artistLabel: "",
  133. albumLabel: "",
  134. });
  135. </script>
  136.  
  137. <!-- Hide & Show Script -->
  138.  
  139. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  140.  
  141. <script>
  142. $(document).ready(function(){
  143. $('.tags').hide();
  144. $('.tags-title').click(function() {
  145. $(this).closest('.entries').find('.tags').slideToggle(500);
  146. });
  147. });
  148. </script>
  149.  
  150. <!-- Unnest Captions Script -->
  151.  
  152. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  153.  
  154. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  155.  
  156. <script>
  157. $(function(){  $('.entries').unnest({
  158. yourCaption: ".text, .caption",
  159. wrapName: ".tumblr_parent",
  160. newCaptionUsername: false,
  161. originalPostCaptionUsername: false,
  162. tumblrAvatars: true,
  163. tumblrAvatarClass: ".tumblr_avatar",
  164. usernameColon: false
  165. });
  166. });
  167. </script>
  168.  
  169. <!--
  170.         NPF images fix v4.0 by @glenthemes [2023]
  171.         💌 gitlab.com/glen-npf/v4-beta
  172. --->
  173.  
  174. <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  175.  
  176. <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  177. <style>
  178. :root {
  179. --NPF-Images-Spacing:1px;
  180. --NPF-Caption-Spacing:1em;
  181. --NPF-Move-1st-Photoset:"no";
  182. --Text-Container-Selector:".caption";
  183. --Text-Reblogs-Selector:".tumblr_parent";
  184. }
  185. </style>
  186.  
  187. <!-- Inline Images Resizing Script -->
  188.  
  189. <script>
  190. $(".tmblr-full, figure").each(function(){
  191. var imgWidth = $(this).attr("data-orig-width"),
  192. img = $(this).find("img"),
  193. imgSrc = img.attr("src");
  194. $('figure').css({'margin-left':'0','margin-right':'0','display':'inline-block'});
  195. if (imgWidth >= 500){
  196. img.attr("src",imgSrc.replace("_500.","_1280."));
  197. $('.tmblr-full img, figure img').css({'width':'auto','height':'auto','vertical-align':'middle'});
  198. }
  199. });  
  200. </script>
  201.  
  202. <!-- PXU Script -->
  203.  
  204. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  205.  
  206. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  207.  
  208. <script>
  209. $(document).ready(function(){
  210. $('.photo-slideshow').pxuPhotoset({
  211. lightbox: true,
  212. rounded: false,
  213. gutter: '1px',
  214. borderRadius: '0px',
  215. photoset: '.photo-slideshow',
  216. photoWrap: '.photo-data',
  217. photo: '.pxu-photo'
  218. });
  219. });
  220. </script>
  221.  
  222. <!-- Responsive Tumblr Videos Script -->
  223.  
  224. <script src="//cdn.jsdelivr.net/gh/robinpx/tumblr@master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  225.  
  226. <script>
  227. $(document).ready(function() {
  228. flexibleFrames($(".video"));  
  229. });
  230. </script>
  231.  
  232. <style type="text/css">
  233.  
  234. .tmblr-iframe--app-cta-button {
  235. display: none!important;
  236. }
  237.  
  238. ::-webkit-scrollbar-thumb:vertical {
  239. background: {color:Scrollbar};
  240. }
  241.  
  242. ::-webkit-scrollbar {
  243. width: 1px;
  244. }
  245.  
  246. ::selection {
  247. background: {color:Main Color};
  248. color: white;
  249. }
  250.  
  251. ::-moz-selection {
  252. background: {color:Main Color};
  253. color: white;
  254. }
  255.  
  256. #s-m-t-tooltip {
  257. background: {color:Tooltip Background};
  258. border-radius: 5px;
  259. color: {color:Tooltip Color};
  260. font-size: {select:Uppercase Font Size};
  261. margin-top: 30px;
  262. padding: 5px;
  263. text-align: center;
  264. text-transform: uppercase;
  265. z-index: 999999999999999999999999999999999999;
  266. }
  267.  
  268. body {
  269. background: {color:Background};
  270. color: {color:Text};
  271. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  272. font-family: '{select:Body Font}', sans-serif;
  273. font-size: {select:Body Font Size};
  274. font-style: normal;
  275. font-weight: 400;
  276. hyphens: auto;
  277. letter-spacing: 1px;
  278. margin: 0px;
  279. text-align: left;
  280. text-transform: none;
  281. word-wrap: break-word;
  282. }
  283.  
  284. a {
  285. color: {color:Link};
  286. text-decoration: none;
  287. -webkit-transition: all 0.5s ease;
  288. -moz-transition: all 0.5s ease;
  289. -o-transition: all 0.5s ease;
  290. }
  291.  
  292. a:hover {
  293. color: {color:Link Hover};
  294. }
  295.  
  296. b {
  297. font-weight: 700;
  298. }
  299.  
  300. h1 {
  301. font-size: 1.2rem;
  302. font-weight: bold;
  303. margin-block-start: 0em;
  304. text-transform: lowercase;
  305. }
  306.  
  307. h2 {
  308. font-size: 1rem;
  309. font-weight: bold;
  310. margin-block-start: 0em;
  311. }
  312.  
  313. blockquote {
  314. border-left: 1px solid {color:Border};
  315. margin: 5px;
  316. padding-left: 5px;
  317. }
  318.  
  319. blockquote img {
  320. height: auto;
  321. max-width: 100%;
  322. }
  323.  
  324. blockquote blockquote {
  325. border-left: 1px solid {color:Border};
  326. padding-left: 5px;
  327. }
  328.  
  329. pre {
  330. background: #f8f8f8;
  331. border-radius: 5px;
  332. padding: 10px;
  333. word-wrap: break-all;
  334. white-space: pre-wrap;
  335. }
  336.  
  337. #container {
  338. background-attachment: fixed;
  339. background-image: url('{image:Container Background Image}');
  340. background-repeat: repeat;
  341. border: 1px solid {color:Border};
  342. border-radius: 5px;
  343. height: 500px;
  344. left: calc(50% - 426px);
  345. position: fixed;
  346. top: calc(50% - 251px);
  347. width: 850px;
  348. }
  349.  
  350. #user-information {
  351. background-attachment: fixed;
  352. background-image: url('{image:Sidebar Background Image}');
  353. background-repeat: repeat;
  354. border: 1px solid {color:Border};
  355. border-radius: 5px;
  356. height: 430px;
  357. margin-bottom: 100px;
  358. margin-left: -100px;
  359. margin-top: -25px;
  360. position: absolute;
  361. width: 440px;
  362. }
  363.  
  364. .tabs-icons-wrapper {
  365. align-items: center;
  366. background: {color:Asker Background};
  367. border-bottom: 1px solid {color:Border};
  368. border-top-left-radius: 5px;
  369. border-top-right-radius: 5px;
  370. display: flex;
  371. height: 15px;
  372. padding: 20px;
  373. width: calc(100% - 40px);
  374. }
  375.  
  376. .wrapper {
  377. margin: 20px;
  378. }
  379.  
  380. .title {
  381. font-size: {select:Body Font Size};
  382. font-weight: bold;
  383. margin-left: 65px;
  384. text-transform: uppercase;
  385. }
  386.  
  387. .image {
  388. height: 250px;
  389. width: 250px;
  390. }
  391.  
  392. .image img {
  393. border-radius: 100%;
  394. height: 250px;
  395. width: 250px;
  396. }
  397.  
  398. .navigation-links {
  399. height: 128px;
  400. margin-left: 222.45px;
  401. margin-top: -189px;
  402. position: absolute;
  403. width: 36.39px;
  404. }
  405.  
  406. .description {
  407. background: {color:Post Background};
  408. border: 1px solid {color:Border};
  409. border-radius: 5px;
  410. bottom: 84px;
  411. font-size: {select:Uppercase Font Size};
  412. height: 250px;
  413. margin-left: 300px;
  414. position: absolute;
  415. width: 200px;
  416. text-transform: uppercase;
  417. }
  418.  
  419. .main-links {
  420. align-items: center;
  421. display: flex;
  422. font-size: {select:Uppercase Font Size};
  423. margin-top: 50px;
  424. text-transform: uppercase;
  425. width: 420px;
  426. }
  427.  
  428. .main-links a {
  429. background: {color:Post Background};
  430. border: 1px solid {color:Border};
  431. border-radius: 100px;
  432. display: inline-block;
  433. margin-right: 10px;
  434. width: 195px;
  435. }
  436.  
  437. .navigation {
  438. display: inline-block;
  439. -webkit-transition: all 0.5s ease;
  440. -moz-transition: all 0.5s ease;
  441. -o-transition: all 0.5s ease;
  442. }
  443.  
  444. .navigation-title {
  445. background: {color:Post Background};
  446. border: 1px solid {color:Border};
  447. border-radius: 100px;
  448. display: inline-block;
  449. font-family: '{select:Body Font}', sans-serif;
  450. font-size: {select:Uppercase Font Size};
  451. letter-spacing: 1px;
  452. padding: 0px;
  453. text-align: left;
  454. text-transform: uppercase;
  455. width: 195px;
  456. -webkit-transition: all 0.5s ease;
  457. -moz-transition: all 0.5s ease;
  458. -o-transition: all 0.5s ease;
  459. }
  460.  
  461. .navigation:hover .navigation-content {
  462. display: block;
  463. }
  464.  
  465. .navigation:hover .navigation-title {
  466. color: {color:Link Hover};
  467. }
  468.  
  469. .navigation-content {
  470. background: {color:Post Background};
  471. border: 1px solid {color:Border};
  472. bottom: 44px;
  473. display: none;
  474. padding: 10px;
  475. padding-bottom: 0px;
  476. position: absolute;
  477. text-align: left;
  478. width: 175px;
  479. z-index: 1;
  480. }
  481.  
  482. .navigation-content a {
  483. background: none;
  484. border: none;
  485. border-radius: 0px;
  486. color: {color:Link}!important;
  487. display: block;
  488. margin-bottom: 10px;
  489. padding: 0px;
  490. -webkit-transition: all 0.5s ease;
  491. -moz-transition: all 0.5s ease;
  492. -o-transition: all 0.5s ease;
  493. }
  494.  
  495. .navigation-content a:hover {
  496. color: {color:Link Hover}!important;
  497. }
  498.  
  499. #navigation {
  500. background: none;
  501. border: none;
  502. outline: none;
  503. margin-left: 367px;
  504. margin-top: 38px;
  505. padding: 0px;
  506. position: absolute;
  507. width: 32.8px;
  508. z-index: 1;
  509. }
  510.  
  511. .modal {
  512. animation-duration: 0.5s;
  513. animation-name: animatetop;
  514. display: none;
  515. height: 550px;
  516. margin-left: 0px;
  517. overflow: auto;
  518. position: fixed;
  519. margin-top: 0px;
  520. width: 850px;
  521. z-index: 1;
  522. }
  523.  
  524. .modal-content {
  525. background: {color:Post Background};
  526. border: 1px solid {color:Border};
  527. overflow-y: scroll;
  528. overflow-x: hidden;
  529. height: 400px;
  530. margin-left: auto;
  531. margin-right: auto;
  532. margin-top: 77.17px;
  533. border-radius: 5px;
  534. width: 400px;
  535. }
  536.  
  537. .close-modal {
  538. background: {color:Post Background};
  539. border: 1px solid {color:Border};
  540. border-radius: 5px;
  541. display: inline-block;
  542. font-size: 0.9rem;
  543. font-variant: normal;
  544. height: 0.9rem;
  545. line-height: 1;
  546. margin-left: 422px;
  547. margin-top: 0px;
  548. padding: 10px;
  549. position: absolute;
  550. text-rendering: auto;
  551. width: 0.9rem;
  552. z-index: 1;
  553. -webkit-transition: all 0.5s ease;
  554. -moz-transition: all 0.5s ease;
  555. -o-transition: all 0.5s ease;
  556. }
  557.  
  558. .close-modal:hover {
  559. color: {color:Link Hover};
  560. }
  561.  
  562. @keyframes animatetop {
  563.  
  564. from {
  565. opacity: 0;
  566. }
  567.  
  568. to {
  569. margin-top: 0px;
  570. opacity: 1;
  571. }
  572.  
  573. }
  574.  
  575. .modal-content-holder {
  576. height: 304px;
  577. overflow-x: hidden;
  578. overflow-y: scroll;
  579. padding: 20px;
  580. width: 370px;
  581. }
  582.  
  583. .about {
  584. margin-bottom: 20px;
  585. margin-left: auto;
  586. margin-right: auto;
  587. width: 360px;
  588. }
  589.  
  590. .about-title {
  591. border-bottom: 1px solid {color:Border};
  592. font-weight: bold;
  593. margin-bottom: 20px;
  594. padding-bottom: 20px;
  595. text-transform: uppercase;
  596. }
  597.  
  598. .about-content {
  599. background: {color:Asker Background};
  600. font-size: {select:Uppercase Font Size};
  601. padding: 20px;
  602. text-transform: uppercase;
  603. }
  604.  
  605. .muses {
  606. margin-left: auto;
  607. margin-right: auto;
  608. width: 360px;
  609. }
  610.  
  611. .muses-title {
  612. border-bottom: 1px solid {color:Border};
  613. font-weight: bold;
  614. margin-bottom: 20px;
  615. padding-bottom: 20px;
  616. text-transform: uppercase;
  617. }
  618.  
  619. .muses-gallery {
  620. display: flex;
  621. flex-direction: row;
  622. flex-wrap: wrap;
  623. margin: -5px;
  624. width: 370px;
  625. }
  626.  
  627. .muses-image {
  628. height: 82.5px;
  629. margin: 5px;
  630. width: 82.5px;
  631. }
  632.  
  633. .muses-image img {
  634. height: 82.5px;
  635. width: 82.5px;
  636. }
  637.  
  638. #posts-wrapper {
  639. height: 400px;
  640. overflow-x: hidden;
  641. overflow-y: scroll;
  642. margin-top: 21.5px;
  643. padding-right: 10px;
  644. position: absolute;
  645. margin-left: 523px;
  646. width: 402px;
  647. }
  648.  
  649. #posts {
  650. width: 392px;
  651. }
  652.  
  653. .entries {
  654. background: {color:Post Background};
  655. border: 1px solid {color:Border};
  656. border-radius: 5px;
  657. margin-bottom: 50px;
  658. padding: 20px;
  659. width: 350px;
  660. }
  661.  
  662. .entries img {
  663. height: auto;
  664. max-width: 100%;
  665. }
  666.  
  667. .npf_row img {
  668. width: 100%;
  669. }
  670.  
  671. .tmblr-full {
  672. margin-bottom: 10px;
  673. }
  674.  
  675. .npf_inst {
  676. margin-bottom: 20px;
  677. }
  678.  
  679. .npf-wrapper {
  680. margin: 0px;
  681. }
  682.  
  683. .npf-wrapper .tmblr-full {
  684. display: flex;
  685. }
  686.  
  687. .text-wrapper {
  688. margin: 0px;
  689. }
  690.  
  691. .read_more {
  692. background: {color:Main Color};
  693. border: 1px solid {color:Border};
  694. border-radius: 5px;
  695. color: white;
  696. display: inline-block;
  697. font-size: {select:Uppercase Font Size};
  698. padding: 10px;
  699. text-align: center;
  700. text-transform: uppercase;
  701. width: calc(100% - 22px);
  702. }
  703.  
  704. .read_more:hover {
  705. background: white;
  706. color: {color:Main Color};
  707. }
  708.  
  709. .vignette, #vignette {
  710. opacity: 0;
  711. }
  712.  
  713. .lightbox-image, #tumblr_lightbox img {
  714. border-radius: 0!important;
  715. box-shadow: none!important;
  716. max-width: none;
  717. }
  718.  
  719. .tmblr-lightbox, #tumblr_lightbox {
  720. background-attachment: fixed;
  721. background-image: url('https://i.imgur.com/7wF2zbK.png');
  722. background-repeat: repeat;
  723. }
  724.  
  725. .lightbox-caption, #tumblr_lightbox_caption {
  726. visibility: hidden;
  727. }
  728.  
  729. .text p {
  730. margin-top: 0px;
  731. }
  732.  
  733. .caption {
  734. margin-top: 20px;
  735. }
  736.  
  737. .caption p {
  738. margin-top: 0px;
  739. }
  740.  
  741. blockquote.tumblr_parent {
  742. border: none;
  743. border-bottom: 1px solid {color:Border};
  744. margin: 0px;
  745. margin-bottom: 20px;
  746. padding: 0px;
  747. }
  748.  
  749. blockquote.tumblr_parent:last-child {
  750. border-bottom: 0px;
  751. }
  752.  
  753. blockquote.user-reblog {
  754. border: none;
  755. margin: 0px;
  756. padding: 0px;
  757. }
  758.  
  759. .tumblr_avatar {
  760. border-radius: 100px;
  761. height: 30px;
  762. margin-bottom: 20px;
  763. width: 30px;
  764. }
  765.  
  766. .tumblr_avatar img {
  767. height: 30px;
  768. width: 30px;
  769. }
  770.  
  771. .user-image img {
  772. height: 30px;
  773. width: 30px;
  774. }
  775.  
  776. a.tumblr_blog {
  777. font-size: {select:Body Font Size};
  778. font-weight: bold;
  779. margin-top: calc((30px - {select:Body Font Size}) / 4);
  780. display: inline-block;
  781. position: absolute;
  782. margin-left: 10px;
  783. text-align: center;
  784. text-transform: lowercase;
  785. }
  786.  
  787. .ask-wrapper {
  788. width: 100%;
  789. }
  790.  
  791. .asker {
  792. background: {color:Asker Background};
  793. border: 1px solid {color:Border};
  794. padding: 20px;
  795. }
  796.  
  797. .asker-url {
  798. font-size: {select:Uppercase Font Size};
  799. text-align: center;
  800. text-transform: uppercase;
  801. }
  802.  
  803. .asker-url a {
  804. border: none;
  805. background: none;
  806. padding: 0px;
  807. }
  808.  
  809. .question {
  810. background: {color:Question Background};
  811. border: 1px solid {color:Border};
  812. border-top: none;
  813. padding: 20px;
  814. text-align: center;
  815. }
  816.  
  817. .question p {
  818. margin-block-start: 0em;
  819. }
  820.  
  821. .question p:last-of-type {
  822. margin-block-end: 0em;
  823. }
  824.  
  825. .quote {
  826. background: {color:Asker Background};
  827. font-size: {select:Uppercase Font Size};
  828. padding: 10px;
  829. text-transform: uppercase;
  830. }
  831.  
  832. .quote-icon {
  833. background: {color:Main Color};
  834. display: inline-block;
  835. color: {color:Quote Icon Color};
  836. margin: -10px;
  837. padding: 10px;
  838. }
  839.  
  840. .quote-wrapper {
  841. margin-top: 20px;
  842. width: 100%;
  843. }
  844.  
  845. .quote a.tumblr_blog {
  846. font-size: {select:Uppercase Font Size};
  847. font-weight: normal;
  848. margin-top: 0px;
  849. margin-left: 0px;
  850. display: inline-block;
  851. position: relative;
  852. text-align: center;
  853. text-transform: uppercase;
  854. }
  855.  
  856. .website {
  857. background: {color:Main Color};
  858. color: {color:Quote Icon Color};
  859. font-size: {select:Uppercase Font Size};
  860. padding: 10px;
  861. text-transform: uppercase;
  862. }
  863.  
  864. .website a {
  865. color: {color:Quote Icon Color};
  866. }
  867.  
  868. .website a:hover {
  869. color: {color:Link Hover};
  870. }
  871.  
  872. .chat {
  873. font-size: {select:Uppercase Font Size};
  874. text-transform: uppercase;
  875. }
  876.  
  877. .chat li {
  878. list-style-type: none;
  879. }
  880.  
  881. .chat li:nth-child(odd) {
  882. background: {color:Main Color};
  883. color: {color:Quote Icon Color};
  884. padding: 10px;
  885. }
  886.  
  887. .chat li:nth-child(even) {
  888. background: {color:Asker Background};
  889. color: {color:Main Color};
  890. padding: 10px;
  891. }
  892.  
  893. .audio iframe {
  894. height: 85px;
  895. width: 100%;
  896. }
  897.  
  898. /** spotify fix by glenthemes **/
  899.  
  900. iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  901. height: 85px!important;
  902. margin-bottom: 0px;
  903. }
  904.  
  905. figure {
  906. display: flex;
  907. width: 100%;
  908. }
  909.  
  910. figcaption.npf-audio-wrapper {
  911. width: 100%;
  912. }
  913.  
  914. .npf-audio-wrapper {
  915. --NPF-Audio-Buttons-Size: 1.4rem;
  916. --NPF-Audio-Buttons-Color: #555555;
  917. --NPF-Audio-Buttons-Spacing: 1.3rem;
  918. --NPF-Audio-Image-Size: 85px;
  919. --NPF-Audio-Image-Spacing: 0px;
  920. }
  921.  
  922. span.npf-audio-title {
  923. font-weight: bold;
  924. }
  925.  
  926. .npf-audio-background {
  927. background-color: #f2f2f2;
  928. padding: 1.5rem;
  929. }
  930.  
  931. video {
  932. height: auto;
  933. width: 100%;
  934. }
  935.  
  936. .source {
  937. background: {color:Asker Background};
  938. border-radius: 5px;
  939. display: inline-block;
  940. font-size: {select:Uppercase Font Size};
  941. margin-top: 10px;
  942. padding: 5px;
  943. text-transform: uppercase;
  944. }
  945.  
  946. .entries-information {
  947. border-top: 1px solid {color:Border};
  948. font-size: {select:Uppercase Font Size};
  949. margin-top: 20px;
  950. padding-top: 20px;
  951. text-transform: uppercase;
  952. }
  953.  
  954. .border {
  955. background: {color:Main Color};
  956. height: 3px;
  957. margin-top: -22px;
  958. position: absolute;
  959. width: 30px;
  960. }
  961.  
  962. .like-b {
  963. display: inline-block;
  964. margin-right: 0px;
  965. position: relative;
  966. }
  967.  
  968. .like-b .like_button iframe {
  969. bottom: 0px;
  970. left: 0px;
  971. opacity: 0;
  972. position: absolute;
  973. right: 0px;
  974. top: 0px;
  975. }
  976.  
  977. .like-b .liked + .b {
  978. color: {color:Like};
  979. }
  980.  
  981. .like-b .liked + .b:after {
  982. content: 'd';
  983. }
  984.  
  985. .tags-title a {
  986. color: {color:Link};
  987. margin-top: 20px;
  988. margin-left: auto;
  989. margin-right: auto;
  990. margin-top: 20px;
  991. text-align: center;
  992. width: 70px;
  993. -webkit-transition: all 0.5s ease;
  994. -moz-transition: all 0.5s ease;
  995. -o-transition: all 0.5s ease;
  996. }
  997.  
  998. .tags-title:hover {
  999. color: {color:Link Hover};
  1000. }
  1001.  
  1002. .tags {
  1003. margin-top: 5px;
  1004. }
  1005.  
  1006. .tags-alternate {
  1007. margin-top: 5px;
  1008. }
  1009.  
  1010. ol.notes {
  1011. font-size: {select:Uppercase Font Size};
  1012. margin: -10px;
  1013. margin-top: 20px;
  1014. padding: 0px;
  1015. text-align: left;
  1016. text-transform: uppercase;
  1017. }
  1018.  
  1019. ol.notes li {
  1020. list-style-type: none;
  1021. margin: 10px;
  1022. }
  1023.  
  1024. ol.notes li.note img.avatar {
  1025. border-radius: 100px;
  1026. vertical-align: -4px;
  1027. height: 16px;
  1028. margin-right: 10px;
  1029. width: 16px;
  1030. }
  1031.  
  1032. .more_notes_link {
  1033. background: {color:Main Color};
  1034. border-radius: 5px;
  1035. color: white;
  1036. display: inline-block;
  1037. padding: 5px 10px 5px 10px;
  1038. text-align: center;
  1039. }
  1040.  
  1041. .pagination {
  1042. font-size: {select:Uppercase Font Size};
  1043. text-transform: uppercase;
  1044. }
  1045.  
  1046. #credit {
  1047. bottom: 15px;
  1048. font-size: 0.7rem;
  1049. position: fixed;
  1050. right: 15px;
  1051. text-transform: uppercase;
  1052. }
  1053.  
  1054. #credit a {
  1055. color: {color:Link};
  1056. }
  1057.  
  1058. #credit a:hover {
  1059. color: {color:Link Hover};
  1060. }
  1061.  
  1062. {CustomCSS}
  1063.    
  1064. </style>
  1065.    
  1066. </head>
  1067.  
  1068. <body>
  1069.  
  1070. <div id="container">
  1071.  
  1072. {block:IfPopUp}
  1073. <button id="navigation" title="Blog Menu" class="open-modal"><i class="fas fa-list-ul" style="background: {color:Main Color};border-radius: 100px;color: {color:Quote Icon Color};font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></button>
  1074.  
  1075. <div class="modal modal_multi">
  1076.  
  1077. <div class="modal-content">
  1078.  
  1079. <div class="close-modal close_modal"><i class="fa-regular fa-circle-xmark"></i></div>
  1080.  
  1081. <div class="tabs-icons-wrapper" style="width: 370px;">
  1082. <div style="background: #e58a9e;border-radius: 100%;display: inline-block;height: 15px;position: absolute;width:15px;"></div>
  1083. <div style="background: #ffc781;border-radius: 100%;display: inline-block;height: 15px;margin-left: 20px;position: absolute;width:15px;"></div>
  1084. <div style="background: #a1dbb2;border-radius: 100%;display: inline-block;height: 15px;margin-left: 40px;position: absolute;width:15px;"></div>
  1085. <div class="title">_Navigation</div>
  1086. </div>
  1087.  
  1088. <div class="modal-content-holder">
  1089.  
  1090. <div class="about">
  1091.  
  1092. <div class="about-title">{text:About Title}</div>
  1093.  
  1094. <div class="about-content">{text:About}</div>
  1095.  
  1096. </div>
  1097.  
  1098. <div class="muses">
  1099.  
  1100. <div class="muses-title">{text:Muses Title}</div>
  1101.  
  1102. <div class="muses-gallery">
  1103.  
  1104. <div class="muses-image"><img src="{image:Muses Image One}"/></div>
  1105.  
  1106. <div class="muses-image"><img src="{image:Muses Image Two}"/></div>
  1107.  
  1108. <div class="muses-image"><img src="{image:Muses Image Three}"/></div>
  1109.  
  1110. <div class="muses-image"><img src="{image:Muses Image Four}"/></div>
  1111.  
  1112. </div>
  1113.  
  1114. </div>
  1115.  
  1116. </div>
  1117.  
  1118. </div>
  1119.  
  1120. </div>
  1121. {/block:IfPopUp}
  1122.  
  1123. <div class="tabs-icons-wrapper">
  1124. <div style="background: #e58a9e;border-radius: 100%;display: inline-block;height: 15px;position: absolute;width:15px;"></div>
  1125. <div style="background: #ffc781;border-radius: 100%;display: inline-block;height: 15px;margin-left: 20px;position: absolute;width:15px;"></div>
  1126. <div style="background: #a1dbb2;border-radius: 100%;display: inline-block;height: 15px;margin-left: 40px;position: absolute;width:15px;"></div>
  1127. <div class="title">_{Name}</div>
  1128. </div>
  1129.  
  1130. <div id="user-information">
  1131.  
  1132. <div class="tabs-icons-wrapper">
  1133. <div style="background: #e58a9e;border-radius: 100%;display: inline-block;height: 15px;position: absolute;width:15px;"></div>
  1134. <div style="background: #ffc781;border-radius: 100%;display: inline-block;height: 15px;margin-left: 20px;position: absolute;width:15px;"></div>
  1135. <div style="background: #a1dbb2;border-radius: 100%;display: inline-block;height: 15px;margin-left: 40px;position: absolute;width:15px;"></div>
  1136. <div class="title">_{text:Title}</div>
  1137. </div>
  1138.  
  1139. <div class="wrapper">
  1140.  
  1141. <div class="image"><img src="{image:Image}"/></div>
  1142.  
  1143. <div class="navigation-links">
  1144. <a href="/" title="Home"><i class="fas fa-home" style="background: {color:Quote Icon Color};border: 1px solid {color:Border};border-radius: 100px;color: {color:Main Color};font-size: 0.9rem;margin-bottom: 10px;padding: 10px;width: 0.9rem;"></i></a>
  1145. {block:AskEnabled}
  1146. <a href="/ask" title="Ask"><i class="fas fa-envelope" style="background: {color:Quote Icon Color};border: 1px solid {color:Border};border-radius: 100px;color: {color:Main Color};font-size: 0.9rem;margin-left: 10px;margin-bottom: 10px;padding: 10px;width: 0.9rem;"></i></a>
  1147. {/block:AskEnabled}
  1148. {block:SubmissionsEnabled}{block:IfSubmitLink}
  1149. <a href="/submit" title="Submit"><i class="fas fa-file-import" style="background: {color:Quote Icon Color};border: 1px solid {color:Border};border-radius: 100px;color: {color:Main Color};font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></a>
  1150. {/block:SubmissionsEnabled}{/block:IfSubmitLink}
  1151. </div>
  1152.  
  1153. {block:Description}
  1154. <div class="description">
  1155.  
  1156. <div class="tabs-icons-wrapper">
  1157. <div style="background: #e58a9e;border-radius: 100%;display: inline-block;height: 15px;position: absolute;width:15px;"></div>
  1158. <div style="background: #ffc781;border-radius: 100%;display: inline-block;height: 15px;margin-left: 20px;position: absolute;width:15px;"></div>
  1159. <div style="background: #a1dbb2;border-radius: 100%;display: inline-block;height: 15px;margin-left: 40px;position: absolute;width:15px;"></div>
  1160. <div class="title">_Info</div>
  1161. </div>
  1162.  
  1163. <div class="wrapper" style="height: 154px;overflow-y: scroll;margin-left: 0px;margin-top: 0px;padding: 20px; width: 160px;">
  1164. {Description}
  1165. </div>
  1166.  
  1167. </div>
  1168. {/block:Description}
  1169.  
  1170. <div class="main-links">
  1171. {block:ifLink1URL}<a href="{text:Link 1 URL}"><i class="fa-solid fa-wand-magic-sparkles" style="background: {color:Main Color};border-radius: 100px;color: {color:Quote Icon Color};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>{text:Link 1 Name}</a>{/block:ifLink1URL}
  1172. <div class="navigation">
  1173. <button class="navigation-title"><i class="fa-solid fa-ellipsis" style="background: {color:Main Color};border-radius: 100px;color: {color:Quote Icon Color};font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Links</button>
  1174. <div class="navigation-content">
  1175. {block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
  1176. {block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
  1177. {block:ifLink4URL}<a href="{text:Link 4 URL}">{text:Link 4 Name}</a>{/block:ifLink4URL}
  1178. {block:ifLink5URL}<a href="{text:Link 5 URL}">{text:Link 5 Name}</a>{/block:ifLink5URL}
  1179. <a href="/archive">Archive</a>
  1180. </div>
  1181. </div>
  1182. </div>
  1183.  
  1184. </div>
  1185.  
  1186. </div>
  1187.  
  1188. <div id="posts-wrapper">
  1189.  
  1190. <div id="posts">
  1191.  
  1192. {block:Posts}
  1193.  
  1194. <div class="entries" id="{PostID}" post-type="{PostType}">
  1195.  
  1196. <div class="tabs-icons-wrapper" style="margin: -20px;margin-bottom: 20px;width: 100%">
  1197. <div style="background: #e58a9e;border-radius: 100%;display: inline-block;height: 15px;position: absolute;width:15px;"></div>
  1198. <div style="background: #ffc781;border-radius: 100%;display: inline-block;height: 15px;margin-left: 20px;position: absolute;width:15px;"></div>
  1199. <div style="background: #a1dbb2;border-radius: 100%;display: inline-block;height: 15px;margin-left: 40px;position: absolute;width:15px;"></div>
  1200. </div>
  1201.  
  1202. {block:Text}
  1203. {block:NotReblog}
  1204. <div class="npf-wrapper">
  1205. {block:Title}
  1206. <h1>{Title}</h1>
  1207. {/block:Title}
  1208. {Body}
  1209. </div>
  1210. {/block:NotReblog}
  1211. {block:RebloggedFrom}
  1212. <div class="text-wrapper">
  1213. {block:Title}
  1214. <h1>{Title}</h1>
  1215. {/block:Title}
  1216. <div class="text">
  1217. {Body}
  1218. </div>
  1219. </div>
  1220. {/block:RebloggedFrom}
  1221. {/block:Text}
  1222.  
  1223. {block:Answer}
  1224. <div class="ask-wrapper">
  1225. <div class="asker">
  1226. <div class="asker-url">
  1227. <i class="far fa-question-circle" style="background: {color:Main Color};border-radius: 100px;color: {color:Post Background};font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i>
  1228. <br><br>
  1229. A Message From <a href="{AskerURL}">{Asker}</a>
  1230. </div>
  1231. </div>
  1232. <div class="question">
  1233. {Question}
  1234. </div>
  1235. </div>
  1236. <div class="caption">
  1237. {Answer}
  1238. </div>
  1239. {/block:Answer}
  1240.  
  1241. {block:Quote}
  1242. <div class="quote">
  1243. <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
  1244. <div class="quote-wrapper">
  1245. "{Quote}</i>" {block:Source}— {Source}{/block:Source}
  1246. </div>
  1247. </div>
  1248. {/block:Quote}
  1249.  
  1250. {block:Link}
  1251. {block:Thumbnail}
  1252. <img src="{Thumbnail}" style="margin-bottom: 10px;"/>
  1253. {/block:Thumbnail}
  1254. <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}
  1255. </a></div>
  1256. {block:Description}
  1257. <div class="caption">
  1258. {Description}
  1259. </div>
  1260. {/block:Description}
  1261. {/block:Link}
  1262.  
  1263. {block:Chat}
  1264. <div class="chat">
  1265. {block:Title}
  1266. <h1>{Title}</h1>
  1267. {/block:Title}
  1268. {block:Lines}
  1269. <li>{block:Label}{Label}{/block:Label}
  1270. {Line}
  1271. </li>
  1272. {/block:Lines}
  1273. </div>
  1274. {/block:Chat}
  1275.  
  1276. {block:Audio}
  1277. <div class="audio">
  1278. {AudioEmbed}
  1279. </div>
  1280. {block:Caption}
  1281. <div class="caption">{Caption}</div>
  1282. {/block:Caption}
  1283. {/block:Audio}
  1284.  
  1285. {block:Photo}
  1286. <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>
  1287. {block:Caption}
  1288. <div class="text-wrapper">
  1289. <div class="caption">{Caption}</div>
  1290. </div>
  1291. {/block:Caption}
  1292. {/block:Photo}
  1293.  
  1294. {block:Photoset}
  1295. <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>
  1296. {block:Caption}
  1297. <div class="text-wrapper">
  1298. <div class="caption">{Caption}</div>
  1299. </div>
  1300. {/block:Caption}
  1301. {/block:Photoset}
  1302.  
  1303. {block:Video}
  1304. <div class="video">
  1305. {Video-500}
  1306. </div>
  1307. {block:Caption}
  1308. <div class="caption">{Caption}</div>
  1309. {/block:Caption}
  1310. {/block:Video}
  1311.  
  1312. {block:ContentSource}
  1313. <div class="source">
  1314. <i class="fas fa-paper-plane" style="color: {color:Main Color};margin-right: 5px;"></i><a href="{SourceURL}" title="{SourceTitle}">Source</a>
  1315. </div>
  1316. {/block:ContentSource}
  1317.  
  1318. {block:Date}
  1319. <div class="entries-information">
  1320. <div class="border"></div>
  1321. {block:PinnedPostLabel}
  1322. <font style="color: {color:Pin};"><i class="fas fa-thumbtack" style="margin-right: 5px;"></i>{PinnedPostLabel}</font>
  1323. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1324. {/block:PinnedPostLabel}
  1325. {block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>
  1326. <font style="color: {color:Main Color};margin-right: 5px;">•</font>{/block:NoteCount}
  1327. <a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
  1328. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1329. {block:RebloggedFrom} <a href="{ReblogParentURL}">Via</a> / {/block:RebloggedFrom}  
  1330. {block:ContentSource}{block:RebloggedFrom} <a href="{ReblogRootURL}">Source</a> / {/block:RebloggedFrom}{/block:ContentSource}
  1331. <a class="like-b" href="#">{LikeButton}<div class="b">Like</div></a> Or <a href="{ReblogURL}" target="_blank">Reblog</a>
  1332. {block:IfHideTags}
  1333. {block:HasTags}
  1334. <font style="color: {color:Main Color};margin-left: 5px;margin-right: 5px;">•</font>
  1335. <a class="tags-title">Show Tags</a>
  1336. <div class="tags">
  1337. {block:Tags}
  1338. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  1339. {/block:Tags}
  1340. </div>
  1341. {/block:HasTags}
  1342. {/block:IfHideTags}
  1343. {block:IfShowTags}
  1344. {block:HasTags}
  1345. <div class="tags-alternate">
  1346. {block:Tags}
  1347. <a href="{TagURL}" style="margin-right: 5px;"><font style="color: {color:Main Color};margin-right: 5px;">•</font>{Tag}</a>
  1348. {/block:Tags}
  1349. </div>
  1350. {/block:HasTags}
  1351. {/block:IfShowTags}
  1352. {block:PostNotes}
  1353. {PostNotes}
  1354. {/block:PostNotes}
  1355. </div>
  1356. {/block:Date}
  1357.  
  1358. </div>
  1359.  
  1360. {/block:Posts}
  1361.  
  1362. {block:Pagination}
  1363. <div class="pagination">
  1364. {CurrentPage} Out Of {TotalPages}
  1365. <font style="float:right;">
  1366. {block:PreviousPage}
  1367. <a href="{PreviousPage}">Previous</a>
  1368. {/block:PreviousPage}
  1369. {block:NextPage}
  1370. Or <a href="{NextPage}">Next</a>
  1371. {/block:NextPage}
  1372. </font>
  1373. </div>
  1374. {/block:Pagination}
  1375.  
  1376. </div>
  1377.  
  1378. </div>
  1379.  
  1380. </div>
  1381.  
  1382. <div id="credit"><a href="http://ghcstfaec.tumblr.com/" title="ghcstfaec" target="_blank">GHCST</a></div>
  1383.  
  1384. </body>
  1385.  
  1386. <!-- Modal Script -->
  1387.  
  1388. <script>
  1389. var modalparent = document.getElementsByClassName("modal_multi");
  1390. var modal_btn_multi = document.getElementsByClassName("open-modal");
  1391. var span_close_multi = document.getElementsByClassName("close_modal");
  1392. function setDataIndex() {
  1393. for (i = 0; i < modal_btn_multi.length; i++)
  1394. {
  1395. modal_btn_multi[i].setAttribute('data-index', i);
  1396. modalparent[i].setAttribute('data-index', i);
  1397. span_close_multi[i].setAttribute('data-index', i);
  1398. }
  1399. }
  1400. for (i = 0; i < modal_btn_multi.length; i++)
  1401. {
  1402. modal_btn_multi[i].onclick = function() {
  1403. var ElementIndex = this.getAttribute('data-index');
  1404. modalparent[ElementIndex].style.display = "block";
  1405. };
  1406. span_close_multi[i].onclick = function() {
  1407. var ElementIndex = this.getAttribute('data-index');
  1408. modalparent[ElementIndex].style.display = "none";
  1409. };
  1410. }
  1411. window.onload = function() {
  1412. setDataIndex();
  1413. };
  1414. window.onclick = function(event) {
  1415. if (event.target === modalparent[event.target.getAttribute('data-index')]) {
  1416. modalparent[event.target.getAttribute('data-index')].style.display = "none";
  1417. }
  1418. if (event.target === modal) {
  1419. modal.style.display = "none";
  1420. }
  1421. };
  1422. var modal = document.getElementById('myModal');
  1423. var btn = document.getElementById("open-modal");
  1424. var span = modal.getElementsByClassName("close-modal")[0];
  1425. btn.onclick = function() {
  1426. modal.style.display = "block";
  1427. }
  1428. span.onclick = function() {
  1429. modal.style.display = "none";
  1430. }
  1431. </script>
  1432.  
  1433. </html>
Advertisement
Add Comment
Please, Sign In to add comment