API tools faq
paste
Advertisement
roxiestheme

Theme 62

roxiestheme
Aug 19th, 2019
6,204
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. Designed by ShuDesigns
  7. shudesigns.tumblr.com
  8. 2019 ⓒ All Rights Reserved.
  9.  
  10. ---
  11.  
  12. >> CREDITS
  13.  
  14. Google Fonts
  15. Feather Icons by Cole Bemis
  16.  
  17. style-my-tooltips by malihu
  18. Extended photoset by PixelUnion, modified by bychloethemes
  19. Video width fix by shythemes
  20.  
  21. -->
  22. <meta charset="utf-8" />
  23. {block:Hidden}
  24. <meta name="color:Body Background" content="#f5f5f5" />
  25. <meta name="color:Container Background" content="#fafafa" />
  26. <meta name="color:Post Background" content="#ffffff" />
  27. <meta name="color:Text Color" content="#888888" />
  28. <meta name="color:Color One" content="#e7d3ce" />
  29. <meta name="color:Color Two" content="#b7d1d1" />
  30. <meta name="color:Border Color" content="#eeeeee" />
  31.  
  32. <meta name="image:Banner" content="" />
  33. <meta name="image:Sidebar" content="" />
  34.  
  35. <meta name="select:Tumblr Controls Style" content="dark-controls" title="Dark" />
  36. <meta name="select:Tumblr Controls Style" content="light-controls" title="Light" />
  37.  
  38. <meta name="select:Banner Blending Mode" content="normal" title="Normal" />
  39. <meta name="select:Banner Blending Mode" content="multiply" title="Multiply" />
  40. <meta name="select:Banner Blending Mode" content="overlay" title="Overlay" />
  41. <meta name="select:Banner Blending Mode" content="screen" title="Screen" />
  42.  
  43. <meta name="select:Sidebar Position" content="left" title="Left" />
  44. <meta name="select:Sidebar Position" content="right" title="Right" />
  45.  
  46. <meta name="select:Sidebar Width" content="225px" title="225px" />
  47. <meta name="select:Sidebar Width" content="175px" title="175px" />
  48. <meta name="select:Sidebar Width" content="200px" title="200px" />
  49. <meta name="select:Sidebar Width" content="250px" title="250px" />
  50.  
  51. <meta name="select:Post Width" content="540px" title="540px" />
  52. <meta name="select:Post Width" content="400px" title="400px" />
  53. <meta name="select:Post Width" content="500px" title="500px" />
  54.  
  55. <meta name="text:Body Font Size" content="14px" />
  56.  
  57. <meta name="text:Tumblr Controls Opacity" content="0.2" />
  58. <meta name="text:Banner Image Opacity" content="1" />
  59.  
  60. <meta name="text:Navbar Title" content="" />
  61. <meta name="text:Navbar Link 1 Title" content="ask" />
  62. <meta name="text:Navbar Link 1 URL" content="/ask" />
  63. <meta name="text:Navbar Link 2 Title" content="" />
  64. <meta name="text:Navbar Link 2 URL" content="" />
  65. <meta name="text:Navbar Link 3 Title" content="" />
  66. <meta name="text:Navbar Link 3 URL" content="" />
  67. <meta name="text:Navbar Link 4 Title" content="" />
  68. <meta name="text:Navbar Link 4 URL" content="" />
  69.  
  70. <meta name="text:Sidebar Link 1 Title" content="facebook"/>
  71. <meta name="text:Sidebar Link 1 Icon" content="facebook" />
  72. <meta name="text:Sidebar Link 1 Url" content="" />
  73. <meta name="text:Sidebar Link 2 Title" content="twitter"/>
  74. <meta name="text:Sidebar Link 2 Icon" content="twitter" />
  75. <meta name="text:Sidebar Link 2 Url" content="" />
  76. <meta name="text:Sidebar Link 3 Title" content="instagram"/>
  77. <meta name="text:Sidebar Link 3 Icon" content="instagram" />
  78. <meta name="text:Sidebar Link 3 Url" content="" />
  79. <meta name="text:Sidebar Link 4 Title" content="youtube"/>
  80. <meta name="text:Sidebar Link 4 Icon" content="youtube" />
  81. <meta name="text:Sidebar Link 4 Url" content="" />
  82. {/block:Hidden}
  83. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  84. <title>{Title}</title>
  85. <link rel="shortcut icon" href="{Favicon}" type="image/x-icon" />
  86. <link rel="alternate" href="{RSS}" type="application/rss+xml" />
  87. <link rel="stylesheet" href="https://static.tumblr.com/ickcbh2/a3opwkj78/style.min.css" type="text/css" />
  88.  
  89. <style type="text/css">
  90.  
  91. /* -------------------------------------------
  92. * variables
  93. * ------------------------------------------*/
  94.  
  95. :root {
  96.  
  97. /* fonts */
  98. --sans: "Source Sans Pro", "Helvetica", "Lucida Grande", "Arial", sans-serif;
  99. --body-font-size: {text:Body Font Size};
  100.  
  101. /* colors */
  102. --body-background: {color:Body Background};
  103. --container-background: {color:Container Background};
  104. --post-background: {color:Post Background};
  105. --text-color: {color:Text Color};
  106. --border-color: {color:Border Color};
  107. --color-one: {color:Color One};
  108. --color-two: {color:Color Two};
  109. --gradient: {color:Color One}, {color:Color Two};
  110.  
  111. /* layout */
  112. --post-width: {select:Post Width};
  113. --sidebar-width: {select:Sidebar Width};
  114. --navbar-height: 80px;
  115. --navbar-height-shrink: 65px;
  116.  
  117. }
  118.  
  119. /* -------------------------------------------
  120. * layout
  121. * ------------------------------------------ */
  122.  
  123. .wp {
  124. min-width: calc(var(--post-width) + 75px + var(--sidebar-width));
  125. }
  126. .container {
  127. margin: 0 auto;
  128. width: calc(var(--post-width) + 75px + var(--sidebar-width));
  129. }
  130.  
  131. /* main */
  132. #main .wrapper {
  133. background-color: var(--body-background);
  134. }
  135. #main .wrapper .container {
  136. position: relative;
  137. z-index: 2;
  138. {block:ifnotBannerImage}
  139. min-height: calc(100vh - 40px - var(--navbar-height-shrink));
  140. margin-top: var(--navbar-height-shrink);
  141. {/block:ifnotBannerImage}
  142. {block:ifBannerImage}
  143. margin-top: -75px;
  144. {/block:ifBannerImage}
  145. padding: 25px;
  146. overflow: hidden;
  147. border-top-left-radius: 5px;
  148. border-top-right-radius: 5px;
  149. background-color: var(--container-background);
  150. }
  151. .entries {
  152. width: var(--post-width);
  153. margin-{select:Sidebar Position}: calc(var(--sidebar-width) + 25px);
  154. }
  155.  
  156. /* -------------------------------------------
  157. * tumblr control
  158. * ------------------------------------------ */
  159.  
  160. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  161. z-index: 1001;
  162. position: fixed;
  163. {block:ifBannerImage}top: 23px;{/block:ifBannerImage}
  164. {block:ifnotBannerImage}top: 15px;{/block:ifnotBannerImage}
  165. right: 40px;
  166. opacity: {text:Tumblr Controls Opacity};
  167. max-width: 350px;
  168. -moz-transform: scale(0.6);
  169. -o-transform: scale(0.6);
  170. -ms-transform: scale(0.6);
  171. -webkit-transform: scale(0.6);
  172. transform: scale(0.6);
  173. -moz-transform-origin: top right;
  174. -o-transform-origin: top right;
  175. -ms-transform-origin: top right;
  176. -webkit-transform-origin: top right;
  177. transform-origin: top right;
  178. -moz-transition: top 0.3s ease-in-out;
  179. -o-transition: top 0.3s ease-in-out;
  180. -webkit-transition: top 0.3s ease-in-out;
  181. transition: top 0.3s ease-in-out;
  182. }
  183. .light-controls.tmblr-iframe-compact .tmblr-iframe--unified-controls {
  184. mix-blend-mode: screen;
  185. }
  186. .dark-controls.tmblr-iframe-compact .tmblr-iframe--unified-controls {
  187. -webkit-filter: invert(100%);
  188. -moz-filter: invert(100%);
  189. -o-filter: invert(100%);
  190. -ms-filter: invert(100%);
  191. filter: invert(100%);
  192. }
  193. .tmblr-iframe-compact.on-scroll .tmblr-iframe--unified-controls {
  194. top: 15px;
  195. }
  196.  
  197. /* -------------------------------------------
  198. * header
  199. * ------------------------------------------ */
  200.  
  201. #header {
  202. position: fixed;
  203. z-index: 1000;
  204. top: 0;
  205. left: 0;
  206. right: 0;
  207. background-color: var(--post-background);
  208. color: var(--text-color);
  209. }
  210. #header:after {
  211. content: "";
  212. display: block;
  213. height: 3px;
  214. background: -webkit-linear-gradient(-45deg, var(--gradient));
  215. background: -moz-linear-gradient(-45deg, var(--gradient));
  216. background: -o-linear-gradient(-45deg, var(--gradient));
  217. background: -ms-linear-gradient(-45deg, var(--gradient));
  218. background: linear-gradient(135deg, var(--gradient));
  219. }
  220.  
  221. /* navbar */
  222. #header .navbar {
  223. {block:ifBannerImage}height: var(--navbar-height);{/block:ifBannerImage}
  224. {block:ifnotBannerImage}height: var(--navbar-height-shrink);{/block:ifnotBannerImage}
  225. display: -webkit-box;
  226. display: -webkit-flex;
  227. display: -ms-flexbox;
  228. display: flex;
  229. -webkit-box-pack: justify;
  230. -ms-flex-pack: justify;
  231. justify-content: space-between;
  232. -webkit-box-align: center;
  233. -ms-flex-align: center;
  234. align-items: center;
  235. -moz-transition: height 0.3s ease-in-out;
  236. -o-transition: height 0.3s ease-in-out;
  237. -webkit-transition: height 0.3s ease-in-out;
  238. transition: height 0.3s ease-in-out;
  239. }
  240. .on-scroll #header .navbar {
  241. height: var(--navbar-height-shrink);
  242. }
  243. #header .navbar .left {
  244. display: -webkit-box;
  245. display: -webkit-flex;
  246. display: -ms-flexbox;
  247. display: flex;
  248. -webkit-box-align: center;
  249. -ms-flex-align: center;
  250. align-items: center;
  251. }
  252.  
  253. /* logo */
  254. #header .navbar .left .logo {
  255. font-size: 1.575rem;
  256. font-weight: 700;
  257. line-height: 1;
  258. }
  259. #header .navbar .left .logo a {
  260. display: block;
  261. background: -webkit-linear-gradient(-45deg, var(--gradient));
  262. background: -moz-linear-gradient(-45deg, var(--gradient));
  263. background: -o-linear-gradient(-45deg, var(--gradient));
  264. background: -ms-linear-gradient(-45deg, var(--gradient));
  265. background: linear-gradient(135deg, var(--gradient));
  266. color: transparent;
  267. -webkit-background-clip: text;
  268. background-clip: text;
  269. }
  270.  
  271. /* search */
  272. #header .navbar .left .search {
  273. position: relative;
  274. margin-left: 20px;
  275. }
  276. #header .navbar .left .search input, #header .navbar .left .search button {
  277. display: block;
  278. -webkit-appearance: none;
  279. -moz-appearance: none;
  280. appearance: none;
  281. border: none;
  282. outline: none;
  283. background: none;
  284. height: 30px;
  285. border-radius: 30px;
  286. }
  287. #header .navbar .left .search [type="text"] {
  288. color: var(--text-color);
  289. border: 1px solid var(--border-color);
  290. width: 150px;
  291. padding: 0 10px;
  292. font-size: 12px;
  293. }
  294. #header .navbar .left .search [type="text"]::-webkit-input-placeholder {
  295. opacity: 0.5;
  296. }
  297. #header .navbar .left .search [type="text"]:-moz-placeholder {
  298. opacity: 0.5;
  299. }
  300. #header .navbar .left .search [type="text"]::-moz-placeholder {
  301. opacity: 0.5;
  302. }
  303. #header .navbar .left .search [type="text"]:-ms-input-placeholder {
  304. opacity: 0.5;
  305. }
  306. #header .navbar .left .search [type="submit"] {
  307. position: absolute;
  308. top: 0;
  309. right: 0;
  310. display: -webkit-box;
  311. display: -webkit-flex;
  312. display: -ms-flexbox;
  313. display: flex;
  314. -webkit-box-pack: center;
  315. -ms-flex-pack: center;
  316. justify-content: center;
  317. -webkit-box-align: center;
  318. -ms-flex-align: center;
  319. align-items: center;
  320. width: 30px;
  321. background: -webkit-linear-gradient(-45deg, var(--gradient));
  322. background: -moz-linear-gradient(-45deg, var(--gradient));
  323. background: -o-linear-gradient(-45deg, var(--gradient));
  324. background: -ms-linear-gradient(-45deg, var(--gradient));
  325. background: linear-gradient(135deg, var(--gradient));
  326. cursor: pointer;
  327. font-size: 14px;
  328. color: var(--post-background);
  329. }
  330. #header .navbar .left .search [type="submit"] svg {
  331. width: 1em;
  332. height: 1em;
  333. }
  334.  
  335. /* menu */
  336. #header .navbar .right .menu {
  337. display: -webkit-box;
  338. display: -webkit-flex;
  339. display: -ms-flexbox;
  340. display: flex;
  341. -webkit-box-pack: center;
  342. -ms-flex-pack: center;
  343. justify-content: center;
  344. -webkit-box-align: center;
  345. -ms-flex-align: center;
  346. align-items: center;
  347. font-size: calc(8px + 0.215rem);
  348. line-height: 1em;
  349. text-transform: uppercase;
  350. letter-spacing: 0.1em;
  351. }
  352. #header .navbar .right .menu li {
  353. position: relative;
  354. overflow: hidden;
  355. padding: 7px 0;
  356. }
  357. #header .navbar .right .menu li + li {
  358. margin-left: 25px;
  359. }
  360. #header .navbar .right .menu li div {
  361. margin: 0 5px;
  362. width: 5px;
  363. height: 5px;
  364. background: -webkit-linear-gradient(top, var(--gradient));
  365. background: -moz-linear-gradient(top, var(--gradient));
  366. background: -o-linear-gradient(top, var(--gradient));
  367. background: -ms-linear-gradient(top, var(--gradient));
  368. background: linear-gradient(to bottom, var(--gradient));
  369. -moz-transform: rotate(-45deg);
  370. -o-transform: rotate(-45deg);
  371. -ms-transform: rotate(-45deg);
  372. -webkit-transform: rotate(-45deg);
  373. transform: rotate(-45deg);
  374. }
  375. #header .navbar .right .menu li a {
  376. display: block;
  377. -moz-transition: none;
  378. -o-transition: none;
  379. -webkit-transition: none;
  380. transition: none;
  381. }
  382. #header .navbar .right .menu li a span {
  383. position: absolute;
  384. top: 7px;
  385. display: block;
  386. opacity: 0;
  387. font-weight: 600;
  388. color: var(--text-color) !important;
  389. }
  390. #header .navbar .right .menu li a:before, #header .navbar .right .menu li a:after {
  391. content: "";
  392. position: absolute;
  393. left: 0;
  394. right: 0;
  395. display: block;
  396. height: 2px;
  397. -moz-transition: transform 0.5s ease-in-out;
  398. -o-transition: transform 0.5s ease-in-out;
  399. -webkit-transition: transform 0.5s ease-in-out;
  400. transition: transform 0.5s ease-in-out;
  401. }
  402. #header .navbar .right .menu li a:before {
  403. top: 0;
  404. -moz-transform: translateX(-100%);
  405. -o-transform: translateX(-100%);
  406. -ms-transform: translateX(-100%);
  407. -webkit-transform: translateX(-100%);
  408. transform: translateX(-100%);
  409. background: -webkit-linear-gradient(-45deg, var(--gradient));
  410. background: -moz-linear-gradient(-45deg, var(--gradient));
  411. background: -o-linear-gradient(-45deg, var(--gradient));
  412. background: -ms-linear-gradient(-45deg, var(--gradient));
  413. background: linear-gradient(135deg, var(--gradient));
  414. }
  415.  
  416. #header .navbar .right .menu li a:after {
  417. bottom: 0;
  418. -moz-transform: translateX(100%);
  419. -o-transform: translateX(100%);
  420. -ms-transform: translateX(100%);
  421. -webkit-transform: translateX(100%);
  422. transform: translateX(100%);
  423. background: -webkit-linear-gradient(-45deg, var(--color-two), var(--color-one));
  424. background: -moz-linear-gradient(-45deg, var(--color-two), var(--color-one));
  425. background: -o-linear-gradient(-45deg, var(--color-two), var(--color-one));
  426. background: -ms-linear-gradient(-45deg, var(--color-two), var(--color-one));
  427. background: linear-gradient(135deg, var(--color-two), var(--color-one));
  428. }
  429. #header .navbar .right .menu li a:hover, #header .navbar .right .menu li a.current {
  430. color: transparent;
  431. }
  432. #header .navbar .right .menu li a:hover span, #header .navbar .right .menu li a.current span {
  433. opacity: 1;
  434. }
  435. #header .navbar .right .menu li a:hover:before,
  436. #header .navbar .right .menu li a:hover:after,
  437. #header .navbar .right .menu li a.current:before,
  438. #header .navbar .right .menu li a.current:after {
  439. -moz-transform: translateY(0);
  440. -o-transform: translateY(0);
  441. -ms-transform: translateY(0);
  442. -webkit-transform: translateY(0);
  443. transform: translateY(0);
  444. }
  445.  
  446. /* -------------------------------------------
  447. * banner
  448. * ------------------------------------------ */
  449.  
  450. .banner {
  451. position: relative;
  452. z-index: 0;
  453. overflow: hidden;
  454. background: -webkit-linear-gradient(-45deg, var(--gradient));
  455. background: -moz-linear-gradient(-45deg, var(--gradient));
  456. background: -o-linear-gradient(-45deg, var(--gradient));
  457. background: -ms-linear-gradient(-45deg, var(--gradient));
  458. background: linear-gradient(135deg, var(--gradient));
  459. }
  460. .banner::before {
  461. content: '';
  462. display: block;
  463. height: calc(var(--navbar-height) + 3px);
  464. -moz-transition: height 0.3s ease-in-out;
  465. -o-transition: height 0.3s ease-in-out;
  466. -webkit-transition: height 0.3s ease-in-out;
  467. transition: height 0.3s ease-in-out;
  468. }
  469. .on-scroll .banner::before {
  470. height: calc(var(--navbar-height-shrink) + 3px);
  471. }
  472. .banner .banner-inner {
  473. mix-blend-mode: {select:Banner Blending Mode};
  474. }
  475. .banner .banner-inner::before {
  476. content: '';
  477. position: absolute;
  478. top: 0;
  479. left: 0;
  480. right: 0;
  481. bottom: 0;
  482. display: block;
  483. }
  484. .banner .banner-inner img {
  485. display: block;
  486. opacity: {text:Banner Image Opacity};
  487. }
  488.  
  489. /* -------------------------------------------
  490. * sidebar
  491. * ------------------------------------------ */
  492.  
  493. .sidebar {
  494. position: absolute;
  495. width: var(--sidebar-width);
  496. {select:Sidebar Position}: 25px;
  497. }
  498. .sidebar.sticky {
  499. position: fixed;
  500. top: calc(var(--navbar-height-shrink) + 25px);
  501. {select:Sidebar Position}: calc(50% - var(--post-width)/2 - var(--sidebar-width)/2 - 75px/2 + 25px)
  502. }
  503.  
  504. /* sidebar img */
  505. .sidebar .sidebar-img {
  506. position: relative;
  507. background: -webkit-linear-gradient(-45deg, var(--gradient));
  508. background: -moz-linear-gradient(-45deg, var(--gradient));
  509. background: -o-linear-gradient(-45deg, var(--gradient));
  510. background: -ms-linear-gradient(-45deg, var(--gradient));
  511. background: linear-gradient(135deg, var(--gradient));
  512. overflow: hidden;
  513. border-top-left-radius: 3px;
  514. border-top-right-radius: 3px;
  515. }
  516. .sidebar .sidebar-img a {
  517. display: block;
  518. }
  519. .sidebar .sidebar-img a::before {
  520. content: '';
  521. position: absolute;
  522. top: 0;
  523. left: 0;
  524. right: 0;
  525. bottom: 0;
  526. display: block;
  527. }
  528. .sidebar .sidebar-img img {
  529. display: block;
  530. width: 100%;
  531. }
  532. .sidebar .sidebar-img .bars {
  533. position: absolute;
  534. bottom: 0;
  535. left: 0;
  536. right: 0;
  537. display: -webkit-box;
  538. display: -webkit-flex;
  539. display: -ms-flexbox;
  540. display: flex;
  541. -webkit-box-pack: justify;
  542. -ms-flex-pack: justify;
  543. justify-content: space-between;
  544. }
  545. .sidebar .sidebar-img .bars span {
  546. position: relative;
  547. display: block;
  548. background-color: var(--post-background);
  549. width: calc(50% - 10px);
  550. height: 10px;
  551. }
  552. .sidebar .sidebar-img .bars span:before {
  553. content: '';
  554. position: absolute;
  555. top: 0;
  556. border-top: transparent solid 10px;
  557. }
  558. .sidebar .sidebar-img .bars span:first-child:before {
  559. right: -10px;
  560. border-left: 10px solid var(--post-background);
  561. }
  562. .sidebar .sidebar-img .bars span:last-child:before {
  563. left: -10px;
  564. border-right: 10px solid var(--post-background);
  565. }
  566. .sidebar .sidebar-img + .sidebar-desc {
  567. margin-top: -10px;
  568. padding-top: 10px;
  569. border-top: none;
  570. border-top-left-radius: 0;
  571. border-top-right-radius: 0;
  572. }
  573. .sidebar .sidebar-img + .sidebar-desc .text {
  574. padding-top: 10px;
  575. }
  576.  
  577. /* sidebar description */
  578. .sidebar .sidebar-desc, .sidebar .sidebar-links {
  579. border: 1px solid var(--border-color);
  580. }
  581. .sidebar .sidebar-desc {
  582. position: relative;
  583. border-radius: 3px;
  584. overflow: hidden;
  585. }
  586. .sidebar .sidebar-desc .text {
  587. background-color: var(--post-background);
  588. padding: 15px;
  589. color: var(--text-color);
  590. font-size: calc(9px + 0.225rem);
  591. line-height: 1.25;
  592. }
  593. .sidebar .sidebar-desc .text a {
  594. color: var(--color-one);
  595. }
  596. .sidebar .sidebar-desc .text a:hover {
  597. color: var(--text-color);
  598. }
  599. .sidebar .sidebar-desc .text p {
  600. margin: 0;
  601. }
  602. .sidebar .sidebar-desc .text p + p {
  603. margin-top: 1em;
  604. }
  605.  
  606. /* sidebar links */
  607. .sidebar .sidebar-links, .sidebar .sidebar-pagi {
  608. margin-top: 25px;
  609. border-radius: 3px;
  610. overflow: hidden;
  611. }
  612. .sidebar .sidebar-links.hidden {
  613. display: none;
  614. }
  615. .sidebar .sidebar-links ul {
  616. display: -webkit-box;
  617. display: -webkit-flex;
  618. display: -ms-flexbox;
  619. display: flex;
  620. }
  621. .sidebar .sidebar-links ul li {
  622. position: relative;
  623. -webkit-box-flex: 1;
  624. -ms-flex: 1;
  625. flex: 1;
  626. border-right: 1px solid var(--border-color);
  627. -webkit-box-sizing: content-box;
  628. -moz-box-sizing: content-box;
  629. box-sizing: content-box;
  630. background: -webkit-linear-gradient(-45deg, var(--gradient));
  631. background: -moz-linear-gradient(-45deg, var(--gradient));
  632. background: -o-linear-gradient(-45deg, var(--gradient));
  633. background: -ms-linear-gradient(-45deg, var(--gradient));
  634. background: linear-gradient(135deg, var(--gradient));
  635. }
  636. .sidebar .sidebar-links ul li:last-child {
  637. border-right: none;
  638. }
  639. .sidebar .sidebar-links ul li:before {
  640. content: '';
  641. display: block;
  642. height: calc(var(--sidebar-width)/4);
  643. }
  644. .sidebar .sidebar-links ul li a {
  645. position: absolute;
  646. top: 0;
  647. left: 0;
  648. right: 0;
  649. bottom: 0;
  650. width: 100%;
  651. overflow: hidden;
  652. display: -webkit-box;
  653. display: -webkit-flex;
  654. display: -ms-flexbox;
  655. display: flex;
  656. -webkit-box-pack: center;
  657. -ms-flex-pack: center;
  658. justify-content: center;
  659. -webkit-box-align: center;
  660. -ms-flex-align: center;
  661. align-items: center;
  662. font-size: calc(16px + 0.285rem);
  663. color: transparent;
  664. background-color: var(--post-background);
  665. -moz-transition-property: color, background-color;
  666. -o-transition-property: color, background-color;
  667. -webkit-transition-property: color, background-color;
  668. transition-property: color, background-color;
  669. }
  670. .sidebar .sidebar-links ul li a svg {
  671. position: relative;
  672. display: block;
  673. stroke: url(#gradient);
  674. width: 1em;
  675. height: 1em;
  676. }
  677. .sidebar .sidebar-links ul li a:first-child:before {
  678. right: -1px;
  679. }
  680. .sidebar .sidebar-links ul li a:hover {
  681. background-color: rgba(255, 255, 255, 0);
  682. }
  683. .sidebar .sidebar-links ul li a:hover svg {
  684. stroke: var(--post-background);
  685. }
  686. .sidebar .sidebar-links ul li a:hover:before {
  687. opacity: 1;
  688. }
  689.  
  690. /* sidebar pagination */
  691. .sidebar .sidebar-pagi ul {
  692. position: relative;
  693. display: -webkit-box;
  694. display: -webkit-flex;
  695. display: -ms-flexbox;
  696. display: flex;
  697. -webkit-box-pack: center;
  698. -ms-flex-pack: center;
  699. justify-content: center;
  700. -webkit-box-align: center;
  701. -ms-flex-align: center;
  702. align-items: center;
  703. background-color: var(--post-background);
  704. border: 1px solid var(--border-color);
  705. border-radius: 40px;
  706. height: 40px;
  707. padding: 0 40px;
  708. color: var(--text-color);
  709. }
  710. .sidebar .sidebar-pagi ul li.arrow {
  711. position: absolute;
  712. top: -1px;
  713. }
  714. .sidebar .sidebar-pagi ul li.arrow a {
  715. display: -webkit-box;
  716. display: -webkit-flex;
  717. display: -ms-flexbox;
  718. display: flex;
  719. -webkit-box-pack: center;
  720. -ms-flex-pack: center;
  721. justify-content: center;
  722. -webkit-box-align: center;
  723. -ms-flex-align: center;
  724. align-items: center;
  725. width: 40px;
  726. height: 40px;
  727. border-radius: 40px;
  728. font-size: 1rem;
  729. color: var(--post-background);
  730. background: -webkit-linear-gradient(-45deg, var(--gradient));
  731. background: -moz-linear-gradient(-45deg, var(--gradient));
  732. background: -o-linear-gradient(-45deg, var(--gradient));
  733. background: -ms-linear-gradient(-45deg, var(--gradient));
  734. background: linear-gradient(135deg, var(--gradient));
  735. }
  736. .sidebar .sidebar-pagi ul li.arrow a svg {
  737. width: 1em;
  738. height: 1em;
  739. }
  740. .sidebar .sidebar-pagi ul li.arrow.prev {
  741. left: -1px;
  742. }
  743. .sidebar .sidebar-pagi ul li.arrow.next {
  744. right: -1px;
  745. }
  746. .sidebar .sidebar-pagi ul li.page {
  747. font-size: calc(8px + 0.145rem);
  748. letter-spacing: 0.5px;
  749. text-transform: uppercase;
  750. }
  751.  
  752. /* -------------------------------------------
  753. * preview page fix
  754. * ------------------------------------------ */
  755.  
  756. /*
  757. this is only for fixing glitches on the customize page
  758. if you don't really need it, you can remove this
  759. */
  760.  
  761. .preview-fix .sidebar.sticky {
  762. position: absolute;
  763. top: auto;
  764. {select:Sidebar Position}: 25px;
  765. }
  766.  
  767. /* -------------------------------------------
  768. * custom css
  769. * ------------------------------------------ */
  770.  
  771. {CustomCss}
  772.  
  773. </style>
  774. </head>
  775. <body class="{select:Tumblr Controls Style}">
  776. <div class="wp">
  777. <header id="header">
  778. <nav class="navbar container">
  779. <div class="left">
  780. <div class="logo">
  781. <a href="/">{block:ifNavbarTitle}{text:Navbar Title}{/block:ifNavbarTitle}{block:ifnotNavbarTitle}{Title}{/block:ifnotNavbarTitle}</a>
  782. </div>
  783. <div class="search">
  784. <form action="/search" method="get">
  785. <input type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
  786. <button type="submit">
  787. <i data-feather="search"></i>
  788. </button>
  789. </form>
  790. </div>
  791. </div>
  792. <div class="right">
  793. <ul class="ns menu">
  794. {block:ifNavbarLink1Title}<li><a href="{text:Navbar Link 1 URL}">{text:Navbar Link 1 Title}</a></li>{/block:ifNavbarLink1Title}
  795. {block:ifNavbarLink2Title}<li><a href="{text:Navbar Link 2 URL}">{text:Navbar Link 2 Title}</a></li>{/block:ifNavbarLink2Title}
  796. {block:ifNavbarLink3Title}<li><a href="{text:Navbar Link 3 URL}">{text:Navbar Link 3 Title}</a></li>{/block:ifNavbarLink3Title}
  797. {block:ifNavbarLink4Title}<li><a href="{text:Navbar Link 4 URL}">{text:Navbar Link 4 Title}</a></li>{/block:ifNavbarLink4Title}
  798. </ul>
  799. </div>
  800. </nav>
  801. </header>
  802. <main id="main">
  803. {block:ifBannerImage}<div class="banner">
  804. <div class="banner-inner">
  805. <img src="{image:Banner}" alt="" />
  806. </div>
  807. </div>{/block:ifBannerImage}
  808. <div class="wrapper">
  809. <div class="container">
  810. <div class="sidebar">
  811. {block:ifSidebarImage}<div class="sidebar-img">
  812. <a href="/"><img src="{image:Sidebar}" /></a>
  813. <div class="bars">
  814. <span></span>
  815. <span></span>
  816. </div>
  817. </div>{/block:ifSidebarImage}
  818. <div class="sidebar-desc">
  819. <div class="text">{Description}</div>
  820. </div>
  821. <div class="sidebar-links {block:ifnotSidebarLink1Url}hidden{/block:ifnotSidebarLink1Url}">
  822. <ul class="ns">
  823. {block:ifSidebarLink1Url}<li>
  824. <a title="{text:Sidebar Link 1 Title}" href="{text:Sidebar Link 1 Url}">
  825. <i data-feather="{text:Sidebar Link 1 Icon}"></i>
  826. </a>
  827. </li>{/block:ifSidebarLink1Url}
  828. {block:ifSidebarLink2Url}<li>
  829. <a title="{text:Sidebar Link 2 Title}" href="{text:Sidebar Link 2 Url}">
  830. <i data-feather="{text:Sidebar Link 2 Icon}"></i>
  831. </a>
  832. </li>{/block:ifSidebarLink2Url}
  833. {block:ifSidebarLink3Url}<li>
  834. <a title="{text:Sidebar Link 3 Title}" href="{text:Sidebar Link 3 Url}">
  835. <i data-feather="{text:Sidebar Link 3 Icon}"></i>
  836. </a>
  837. </li>{/block:ifSidebarLink3Url}
  838. {block:ifSidebarLink4Url}<li>
  839. <a title="{text:Sidebar Link 4 Title}" href="{text:Sidebar Link 4 Url}">
  840. <i data-feather="{text:Sidebar Link 4 Icon}"></i>
  841. </a>
  842. </li>{block:ifSidebarLink4Url}
  843. </ul>
  844. </div>
  845. {block:Pagination}<div class="sidebar-pagi">
  846. <ul class="ns">
  847. {block:PreviousPage}<li class="arrow prev"><a href="{PreviousPage}"><i data-feather="chevron-left"></i></a></li>{/block:PreviousPage}
  848. <li class="page">page {CurrentPage} of {TotalPages}</li>
  849. {block:NextPage}<li class="arrow next"><a href="{NextPage}"><i data-feather="chevron-right"></i></a></li>{/block:NextPage}
  850. </ul>
  851. </div>{/block:Pagination}
  852. </div>
  853. <div class="entries">
  854. {block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
  855. <article class="post">
  856. {block:Date}<div class="post-head">
  857. <ul class="ns left">
  858. <li class="date">
  859. <i data-feather="calendar"></i><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
  860. </li>
  861. <li><span></span></li>
  862. <li class="time">
  863. <i data-feather="clock"></i>{12HourWithZero}:{Minutes} {AmPm}
  864. </li>
  865. </ul>
  866. {block:RebloggedFrom}<ul class="ns right">
  867. <li class="source">
  868. <a href="{ReblogRootURL}" target="_blank" title="Source">
  869. <img src="{ReblogRootPortraitURL-48}" alt="" />
  870. </a>
  871. </li>
  872. <li class="via">
  873. <a href="{ReblogParentURL}" target="_blank" title="From">
  874. <img src="{ReblogParentPortraitURL-48}" alt="" />
  875. </a>
  876. </li>
  877. </ul>{/block:RebloggedFrom}
  878. </div>{/block:Date}
  879. <div class="post-content">
  880. {block:Text}<div class="post-container">
  881. {block:Title}<div class="post-title">{Title}</div>{/block:Title}
  882. <div class="post-body post-style">
  883. {block:NotReblog}<div class="caption">
  884. {Body}
  885. </div>{/block:NotReblog}
  886. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  887. <div class="reblog-head">
  888. <div class="reblog-avatar">
  889. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  890. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  891. </div>
  892. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  893. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  894. </div>
  895. <div class="reblog-content">{Body}</div>
  896. </div>{/block:Reblogs}{/block:RebloggedFrom}
  897. </div>
  898. </div>{/block:Text}
  899. {block:Photo}<div class="post-media">
  900. {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%" style="display:block;" />{LinkCloseTag}
  901. </div>
  902. {block:Caption}<div class="post-container">
  903. <div class="post-body post-style">
  904. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  905. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  906. <div class="reblog-head">
  907. <div class="reblog-avatar">
  908. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  909. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  910. </div>
  911. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  912. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  913. </div>
  914. <div class="reblog-content">{Body}</div>
  915. </div>{/block:Reblogs}{/block:RebloggedFrom}
  916. </div>
  917. </div>{/block:Caption}{/block:Photo}
  918. {block:Photoset}<div class="post-media">
  919. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  920. {block:Photos}<div class="photo-data">
  921. <div class="pxu-photo">
  922. <img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" />
  923. </div><!-- pxu-photo -->
  924. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  925. </div><!-- photo-data -->{/block:Photos}
  926. </div><!-- photo-slideshow-->
  927. </div>
  928. {block:Caption}<div class="post-container">
  929. <div class="post-body post-style">
  930. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  931. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  932. <div class="reblog-head">
  933. <div class="reblog-avatar">
  934. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  935. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  936. </div>
  937. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  938. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  939. </div>
  940. <div class="reblog-content">{Body}</div>
  941. </div>{/block:Reblogs}{/block:RebloggedFrom}
  942. </div>
  943. </div>{/block:Caption}
  944. {block:Hidden}{block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}{/block:ContentSource}{/block:Hidden}{/block:Photoset}
  945. {block:Video}<div class="post-media">
  946. <div class="video" style="margin-bottom:-5px;">{Video-500}</div>
  947. </div>
  948. {block:Caption}<div class="post-container">
  949. <div class="post-body post-style">
  950. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  951. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  952. <div class="reblog-head">
  953. <div class="reblog-avatar">
  954. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  955. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  956. </div>
  957. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  958. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  959. </div>
  960. <div class="reblog-content">{Body}</div>
  961. </div>{/block:Reblogs}{/block:RebloggedFrom}
  962. </div>
  963. </div>{/block:Caption}{/block:Video}
  964. {block:Audio}<div class="post-media">
  965. <div class="width_fix">{AudioEmbed-500}</div>
  966. </div>
  967. {block:Caption}<div class="post-container">
  968. <div class="post-body post-style">
  969. {block:NotReblog}<div class="caption">{Caption}</div>{/block:NotReblog}
  970. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  971. <div class="reblog-head">
  972. <div class="reblog-avatar">
  973. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  974. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  975. </div>
  976. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  977. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  978. </div>
  979. <div class="reblog-content">{Body}</div>
  980. </div>{/block:Reblogs}{/block:RebloggedFrom}
  981. </div>
  982. </div>{/block:Caption}{/block:Audio}
  983. {block:Link}<div class="post-media">
  984. <a href="{Url}" target="_blank" class="link-button">
  985. {block:Thumbnail}<div class="thumbnail"><img src="{Thumbnail}" width="100%" /></div>{/block:Thumbnail}
  986. <div class="info-container">
  987. {block:Host}<div class="publisher-container {block:Thumbnail}if-thumbnail{/block:Thumbnail}">
  988. <div class="publisher">{Host}</div>
  989. </div>{/block:Host}
  990. <div class="title">{Name}<i data-feather="chevron-right"></i></div>
  991. {block:Excerpt}<div class="excerpt">{Excerpt}</div>{/block:Excerpt}
  992. {block:Author}<div class="author">{Author}</div>{/block:Author}
  993. </div>
  994. </a>
  995. </div>
  996. {block:Description}<div class="post-container">
  997. <div class="post-body post-style">
  998. {block:NotReblog}<div class="caption">{Description}</div>{/block:NotReblog}
  999. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1000. <div class="reblog-head">
  1001. <div class="reblog-avatar">
  1002. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1003. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1004. </div>
  1005. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1006. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1007. </div>
  1008. <div class="reblog-content">{Body}</div>
  1009. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1010. </div>
  1011. </div>{/block:Description}{/block:Link}
  1012. {block:Quote}<div class="post-container">
  1013. <div class="post-body post-style">
  1014. <div class="quote"><span class="quotation-mark">&ldquo;</span>{Quote}<span class="quotation-mark">&rdquo;</span></div>
  1015. {block:Source}<div class="quote-source">— {Source}</div>{/block:Source}
  1016. </div>
  1017. </div>{/block:Quote}
  1018. {block:Chat}<div class="post-container">
  1019. {block:Title}<div class="post-title">{Title}</div>{/block:Title}
  1020. <div class="post-body post-style">
  1021. <ul class="ns chat">
  1022. {block:Lines}<li class="user_{UserNumber}">
  1023. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1024. <span class="line">{Line}</span>
  1025. </li>{/block:Lines}
  1026. </ul>
  1027. </div>
  1028. </div>{/block:Chat}
  1029. {block:Answer}<div class="post-container">
  1030. <div class="post-body post-style">
  1031. <div class="ask">
  1032. <div class="asker">
  1033. <div class="asker-avatar"><img src="{AskerPortraitURL-64}" alt="" /></div>
  1034. <div class="asker-name">{Asker}</div>
  1035. </div>
  1036. <div class="asker-question">{Question}</div>
  1037. </div>
  1038. {block:NotReblog}<div class="caption">{Replies}</div>{/block:NotReblog}
  1039. {block:Answerer}<div class="answer">
  1040. <div class="answerer">
  1041. <div class="answerer-avatar"><img src="{AnswererPortraitURL-48}" alt="" /></div>
  1042. <div class="answerer-name">{Answerer}</div>
  1043. </div>
  1044. <div class="answerer-answer">{Answer}</div>
  1045. </div>{/block:Answerer}
  1046. {block:RebloggedFrom}{block:Reblogs}<div class="caption">
  1047. <div class="reblog-head">
  1048. <div class="reblog-avatar">
  1049. {block:IsActive}<a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}"></a>{/block:IsActive}
  1050. {block:IsDeactivated}<span><img src="{PortraitURL-64}"></span>{block:IsDeactivated}
  1051. </div>
  1052. {block:IsActive}<a target="_blank" class="reblog-username" href="{Permalink}">{Username}</a>{/block:IsActive}
  1053. {block:IsDeactivated}<span class="reblog-username">{Username}</span>{/block:IsDeactivated}
  1054. </div>
  1055. <div class="reblog-content">{Body}</div>
  1056. </div>{/block:Reblogs}{/block:RebloggedFrom}
  1057. </div>
  1058. </div>{/block:Answer}
  1059. </div><!-- //post-content -->
  1060. {block:Date}<div class="post-foot">
  1061. {block:HasTags}<div class="top">
  1062. <ul class="ns">
  1063. {block:Tags}<li><a href="{TagUrl}">#{Tag}</a></li>{/block:Tags}
  1064. </ul>
  1065. </div>{/block:HasTags}
  1066. <div class="bottom">
  1067. <div class="left">
  1068. {block:NoteCount}<a href="{Permalink}" class="notes note-{NoteCount}">{NoteCount}</a>{/block:NoteCount}
  1069. </div>
  1070. <ul class="ns right">
  1071. <li class="reblog"><a href="{ReblogURL}"><i data-feather="refresh-cw"></i></a></li>
  1072. <li class="like">
  1073. {LikeButton size="24" color="black"}
  1074. <span class="custom-like"><i data-feather="heart"></i></span>
  1075. </li>
  1076. </ul>
  1077. </div>
  1078. </div>{/block:Date}
  1079. </article>
  1080. {block:PostNotes}<div class="post-notes">{PostNotes}</div>{/block:PostNotes}
  1081. {/block:Posts}
  1082. </div>
  1083. </div>
  1084. </div>
  1085. </main>
  1086. <footer id="footer">
  1087. <div class="footer-inner container">
  1088. © {CopyrightYears} <a href="/">{Name}</a> all rights reserved. Theme by <a href="https://shudesigns.tumblr.com" target="_blank">shudesigns</a> • Powered by <a href="https://tumblr.com" target="_blank">Tumblr</a>
  1089. </div>
  1090. </footer>
  1091. </div>
  1092. <!-- svg gradient -->
  1093. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0" style="display: block">
  1094. <defs>
  1095. <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(-45)" gradientUnits="userSpaceOnUse">
  1096. <stop offset="0%" stop-color="{color:Color One}" />
  1097. <stop offset="100%" stop-color="{color:Color Two}" />
  1098. </linearGradient>
  1099. </defs>
  1100. </svg>
  1101. <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  1102. <script src="//unpkg.com/feather-icons"></script>
  1103. <script src="https://static.tumblr.com/ickcbh2/1Ftpwh5gh/tooltips.js"></script>
  1104. <script src="https://static.tumblr.com/a0dmjhi/MGlp5b8wd/pxuphotoset.min.js"></script>
  1105. <script src="https://static.tumblr.com/ickcbh2/iILpwhuyy/main.min.js"></script>
  1106. <script>
  1107. $(function() {
  1108. // for preview page only
  1109. var pathname = location.pathname.split('/'),
  1110. pathname1 = (pathname[1]);
  1111. if (pathname1 === 'customize_preview_receiver.html') {
  1112. $('body').addClass('preview-fix');
  1113. }
  1114. // list style
  1115. var encode = encodeURIComponent('{color:Color One}');
  1116. $('html').find('head').append(`<style type="text/css">
  1117. .post-style ul:not(.ns) li::before {
  1118. content: url('data:image/svg+xml;utf8,<svg xmlns="h`+`t`+`t`+`p`+`:`+`//www.w3.org/2000/svg" width="0.75em" height="0.75em" viewBox="0 0 24 24" fill="none" stroke="` + encode + `" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
  1119. }
  1120. </style>`);
  1121. // audio player
  1122. var $audio = $('iframe.tumblr_audio_player');
  1123. $audio.load(function() {
  1124. $(this).contents().find('head').append(`<style type="text/css">
  1125. .audio-player {
  1126. background: -webkit-linear-gradient(-45deg, {color:Color One}, {color:Color Two});
  1127. background: -moz-linear-gradient(-45deg, {color:Color One}, {color:Color Two});
  1128. background: -o-linear-gradient(-45deg, {color:Color One}, {color:Color Two});
  1129. background: -ms-linear-gradient(-45deg, {color:Color One}, {color:Color Two});
  1130. background: linear-gradient(135deg, {color:Color One}, {color:Color Two});
  1131. color: #fff !important;
  1132. }
  1133. .audio-player .audio-info .track-artist {
  1134. color: #fff !important;
  1135. }
  1136. </style>`);
  1137. });
  1138. });
  1139. </script>
  1140. </body>
  1141. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!