API tools faq
paste
glenthemes

Music Page [02]: Melodic Wish

glenthemes
May 2nd, 2019 (edited)
10,976
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.74 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Music Page [02]: Melodic Wish
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/05/03
  6. Revamp date: 2022/03/25
  7. Last updated: 2023/05/11
  8.  
  9. TERMS OF USE:
  10. 1) Do not remove the credit.
  11. 2) Do not remove parts of the code without my permission.
  12. 3) Do not claim my codes as your own.
  13. 4) Do not use my works as base codes.
  14. 5) You may add widgets to my themes and pages.
  15.  
  16. HOW TO USE:
  17. https://docs.google.com/presentation/d/1VPynhrrjrrgED_WfqKW4BK0QD8O96lYJB_NV82Wq_QE/edit?usp=sharing
  18.  
  19. CREDITS:
  20. (ﾉ´ヮ´)ﾉ*:･ﾟ✧ ~ glencredits.tumblr.com/melodic-wish
  21. ------------------------------------------------------------------------>
  22.  
  23. <!DOCTYPE html>
  24. <html>
  25.  
  26. <head>
  27.  
  28. <title>{Title}</title>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32. <meta name="viewport" content="width=device-width, initial-scale=1">
  33.  
  34. <!------- JQUERY ------->
  35. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  36.  
  37. <!------- FONTS ------->
  38. <link href="https://fonts.googleapis.com/css?family=Philosopher|Work+Sans|Quicksand:500|Rubik:300,400|Newsreader" rel="stylesheet">
  39.  
  40. <link rel="preload" href="//glen-assets.github.io/fonts/Ra-Mono.otf" as="font" type="font/otf" crossorigin>
  41.  
  42. <!------- ICON LIBRARIES ------->
  43. <script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  44.  
  45. <script src="https://unpkg.com/phosphor-icons"></script>
  46.  
  47. <!------- ESSENTIALS ------->
  48. <script src="//static.tumblr.com/snld4jp/adOr5n1p5/malihu-tooltips.js"></script>
  49.  
  50. <link href="https://glen-themes.gitlab.io/music-pages/02/mwish.css" rel="stylesheet">
  51.  
  52. <script src="https://glen-themes.gitlab.io/music-pages/02/mwish.js"></script>
  53.  
  54. <!-------------------------------------------------------------------->
  55.  
  56. <style type="text/css">
  57.  
  58. @font-face { font-family: "ra mono"; src: url("//glen-assets.github.io/fonts/Ra-Mono.otf"); }
  59.  
  60. /*----- TOOLTIPS -----*/
  61. #s-m-t-tooltip {
  62. padding:5px 10px;
  63. margin:20px;
  64. background-color:var(--Tooltips-BG);
  65. border-radius:2px;
  66. font-family:var(--Tooltips-Font);
  67. font-size:var(--Tooltips-Text-Size);
  68. letter-spacing:0.06em;
  69. text-transform:uppercase;
  70. color:var(--Tooltips-Text);
  71. z-index:99;
  72. max-width:40vw;
  73. }
  74.  
  75. /*----- TUMBLR CONTROLS -----*/
  76. iframe#tumblr_controls, .iframe-controls--desktop {
  77. top:calc(var(--Screen-Padding) - (8px * var(--TumblrControls-Resize-Factor)))!important;
  78. right:calc(var(--Screen-Padding) - (15px * var(--TumblrControls-Resize-Factor)))!important;
  79. position:fixed!important;
  80.  
  81. --TumblrControls-Resize-Factor:0.69;
  82. transform:scale(var(--TumblrControls-Resize-Factor),var(--TumblrControls-Resize-Factor));
  83.  
  84. transform-origin:100% 0;
  85. opacity:calc(100% - var(--TumblrControls-Transparency));
  86. z-index:999999!important;
  87. }
  88.  
  89. [tumblr-controls="black"] #iframe_tumblr_controls,
  90. [tumblr-controls="black"] .iframe-controls--desktop {
  91. filter:invert(100%) hue-rotate(180deg)!important;
  92. -webkit-filter:invert(100%) hue-rotate(180deg)!important;
  93. }
  94.  
  95. /*----- TEXT HIGHLIGHT -----*/
  96. ::selection {
  97. background:var(--Highlighted-Text-BG);
  98. color:var(--Highlighted-Text-Color);
  99. }
  100.  
  101. ::-moz-selection {
  102. background:var(--Highlighted-Text-BG);
  103. color:var(--Highlighted-Text-Color);
  104. }
  105.  
  106. /*----- BASICS -----*/
  107. html, body {overflow:hidden;}
  108.  
  109. body {
  110. /* ignore this */
  111.  
  112. opacity:0;
  113. transition:opacity 0.420s ease-in-out;
  114. text-align:left;
  115. }
  116.  
  117.  
  118.  
  119. /*----- CUSTOMIZATION OPTIONS -----*/
  120.  
  121. body {
  122. background-color:#222;
  123.  
  124. background-image:url("");
  125. background-attachment:fixed;
  126. background-repeat:repeat;
  127. }
  128.  
  129. :root {
  130.  
  131. /*--- GENERAL SETTINGS ---*/
  132. --Show-Guide-Message:yes;
  133.  
  134. --Screen-Padding:45px;
  135. --Screen-Left-Width:50%;
  136. --Screen-Right-Width:50%;
  137. --Screen-Center-Gap:69px;
  138.  
  139. /*--- TOP LEFT INTRO ---*/
  140. --Back-Icon-Size:20px;
  141. --Back-Icon-Color:#ccc;
  142. --Back-Icon-Right-Gap:13px;
  143.  
  144. --Headphones-Icon-Size:30px;
  145. --Headphones-Icon-Color:#ccc;
  146. --Headphones-Icon-Right-Gap:17px;
  147.  
  148. --Intro-Title-Font:"philosopher";
  149. --Intro-Title-Color:#ccc;
  150. --Intro-Title-Size:15px;
  151.  
  152. --Intro-Subtitle-Font:"quicksand";
  153. --Intro-Subtitle-Color:#aaa;
  154. --Intro-Subtitle-Size:9px;
  155.  
  156. --Intro-Text-Spacing:2px;
  157.  
  158. /*--- SHUFFLE BUTTON SETTINGS ---*/
  159. --Shuffle-Icon-Size:15px;
  160. --Shuffle-Icon-Color:#bbb;
  161. --Shuffle-Icon-Right-Gap:6px;
  162. --Shuffle-Text-Font:"rubik";
  163. --Shuffle-Text-Size:10px;
  164. --Shuffle-Text-Color:#ccc;
  165.  
  166. --Shuffle-CLICKED-Icon-Color:#ccbba8;
  167. --Shuffle-CLICKED-Text-Color:#ccbba8;
  168.  
  169. /*--- PLAY-ALL BUTTON SETTINGS ---*/
  170. --PlayAll-Icon-Size:15px;
  171. --PlayAll-Icon-Color:#bbb;
  172. --PlayAll-Icon-Right-Gap:6px;
  173. --PlayAll-Text-Font:"rubik";
  174. --PlayAll-Text-Size:10px;
  175. --PlayAll-Text-Color:#ccc;
  176.  
  177. --PlayAll-CLICKED-Icon-Color:#ccbba8;
  178. --PlayAll-CLICKED-Text-Color:#ccbba8;
  179.  
  180. --Playlist-Buttons-Spacing:18px;
  181.  
  182. --Intro-Bottom-Gap:40px;
  183.  
  184. /*--- PLAYLIST SETTINGS ---*/
  185. --Playlist-FadeIn:yes;
  186. --Playlist-FadeIn-Gap-Amount:22px;
  187. --Playlist-FadeIn-Speed:420ms; /* ms only */
  188. --Playlist-FadeIn-Step-Delay:50ms; /* ms only */
  189.  
  190. --Song-Row-Padding:16px;
  191. --Song-Row-Corner-Roundness:2px;
  192.  
  193. --Music-Buttons-Size:12px;
  194. --Music-Buttons-Style:"filled"; /* can be "filled" or "hollow" */
  195. --Music-Buttons-Color:#ccc;
  196. --Music-Buttons-Right-Gap:13px;
  197.  
  198. --Song-Name-Font:"work sans";
  199. --Song-Name-Text-Size:12px;
  200. --Song-Name-Text-Color:#ccc;
  201.  
  202. --Song-Duration-Font:"ra mono";
  203. --Song-Duration-Text-Size:11px;
  204. --Song-Duration-Text-Color:#ccc;
  205. --Song-Duration-Colon-Spacing:-0.5px;
  206.  
  207. --Song-HOVER-Background:#333;
  208. --Song-HOVER-Buttons-Color:#eee;
  209. --Song-HOVER-Name-Color:#eee;
  210. --Song-HOVER-Duration-Color:#eee;
  211. --Song-HOVER-Speed:269ms;
  212.  
  213. --Song-CLICKED-Background:transparent;
  214. --Song-CLICKED-Buttons-Color:#ccbba8;
  215. --Song-CLICKED-Name-Color:#ccbba8;
  216. --Song-CLICKED-Duration-Color:#ccbba8;
  217. --Song-CLICKED-Speed:400ms;
  218.  
  219. /*--- AUTOPLAY OPTIONS ---*/
  220. --Autoplay-First-Song:no;
  221. --Autoplay-Next-Song:yes;
  222. --Loop-Playlist:yes;
  223.  
  224. /*--- SCROLLBAR SETTINGS ---*/
  225. --Scrollbar-Left-Gap:8px;
  226. --Scrollbar-Thumb:#989395;
  227. --Scrollbar-Track:#393738;
  228. --Scrollbar-Background:#222;
  229. --Scrollbar-Width:13px;
  230.  
  231. /*--- SIDEBAR IMAGE SETTINGS ---*/
  232. --Sidebar-Image-Width:220px;
  233. --Sidebar-Image-Corner-Roundness:3px;
  234. --Sidebar-Image-Shadow:#252525;
  235. --Sidebar-Image-Bottom-Gap:30px;
  236.  
  237. /*--- VINYL SETTINGS ---*/
  238. --Vinyl-Left-Gap:50%;
  239. --Vinyl-Size:90%;
  240.  
  241. --Vinyl-Load-In-Speed:1.1s;
  242. --Vinyl-Spin-Speed:2s;
  243.  
  244. /*--- SIDEBAR TEXT SETTINGS ---*/
  245. --Sidebar-Text-Width:220px;
  246. --Sidebar-Text-Spacing:7px;
  247.  
  248. --Artist-Name-Font:"work sans";
  249. --Artist-Name-Size:13px;
  250. --Artist-Name-Color:#d7d2cf;
  251.  
  252. --Album-Name-Font:"quicksand";
  253. --Album-Name-Size:11px;
  254. --Album-Name-Color:#aaa;
  255.  
  256. --Sidebar-Divider-Spacing:25px;
  257. --Sidebar-Divider-Width:150px;
  258. --Sidebar-Divider-Thickness:2px;
  259. --Sidebar-Divider-Color:#b4af9a;
  260. --Sidebar-Divider-Roundness:4px;
  261.  
  262. --Divider-QuoteMark-Font:"newsreader";
  263. --Divider-QuoteMark-Size:45px;
  264. --Divider-QuoteMark-Color:#ccc;
  265. --Divider-QuoteMark-Gap-Top:4px;
  266. --Divider-QuoteMark-Gap-Right:17px;
  267.  
  268. --Description-Font:"work sans";
  269. --Description-Text-Size:12.5px;
  270. --Description-Text-Color:#bbb;
  271. --Description-Italic:#b2b69a;
  272. --Description-Bold:#c5b8a3;
  273. --Description-Links:#a5b089;
  274. --Description-Links-Underline:#555;
  275. --Description-LineHeight:200%;
  276.  
  277. /*--- NAVBAR SETTINGS ---*/
  278. --Navbar-Width:80%;
  279. --Navbar-Background:#323232;
  280. --Navbar-Padding:15px;
  281. --Navbar-Corner-Roundness:2px;
  282. --Navbar-Box-Shadow:#181818;
  283.  
  284. --Navbar-Stripe-1-Width:6px;
  285. --Navbar-Stripe-1-Color:#b4af9a;
  286.  
  287. --Navbar-Stripe-Spacing:4px;
  288.  
  289. --Navbar-Stripe-2-Width:1px;
  290. --Navbar-Stripe-2-Color:#b4af9a;
  291.  
  292. --Navbar-Title-Font:"philosopher";
  293. --Navbar-Title-Size:12px;
  294. --Navbar-Title-Color:#d7d2cf;
  295.  
  296. --Navbar-Links-Font:"work sans";
  297. --Navbar-Links-Size:10px;
  298. --Navbar-Links-Color:#cfc4bd;
  299.  
  300. --Navbar-Links-Divider:"✧";
  301. --Navbar-Links-Divider-Size:11px;
  302. --Navbar-Links-Divider-Color:#ccc;
  303. --Navbar-Links-Divider-Spacing:14px;
  304.  
  305. /*--- TOOLTIPS ---*/
  306. --Tooltips-BG:#333;
  307. --Tooltips-Font:"work sans";
  308. --Tooltips-Text-Size:9px;
  309. --Tooltips-Text:#ccc;
  310.  
  311. /*--- TEXT HIGHLIGHT ---*/
  312. --Highlighted-Text-BG:#4f4b41;
  313. --Highlighted-Text-Color:inherit;
  314.  
  315. /*--- TUMBLR CONTROLS ---*/
  316. --TumblrControls-Color:white;
  317. --TumblrControls-Transparency:30%; /* % only */
  318.  
  319. /*--- CREDIT SETTINGS ---*/
  320. --Credit-Corner-Gap:13px;
  321. --Credit-Area-Size:16px;
  322. --Credit-Dots-Size:4px;
  323. --Credit-Dots-Color:#908c7b;
  324.  
  325. /* end root // end :root */
  326. }
  327.  
  328. /* what you see in customize page view */
  329. /* you can edit or remove this as you like */
  330. [customize-page="true"]:root {
  331. --Screen-Padding:5vw;
  332. --Screen-Center-Gap:5vw;
  333. }
  334.  
  335. /*----- CONTAINER STUFF -----*/
  336. [maincont]{
  337. position:absolute;
  338. top:0;margin-top:var(--Screen-Padding);
  339. left:0;margin-left:var(--Screen-Padding);
  340. width:calc(100vw - (var(--Screen-Padding) * 2));
  341. height:calc(100vh - (var(--Screen-Padding) * 2));
  342. }
  343.  
  344. [leftstuff]{
  345. position:absolute;
  346. width:calc(var(--Screen-Left-Width) - (var(--Screen-Center-Gap) / 2));
  347. height:100%;
  348. display:flex;
  349. flex-direction:column;
  350. }
  351.  
  352. [rightstuff]{
  353. position:absolute;
  354. right:0;
  355. width:calc(var(--Screen-Right-Width) - (var(--Screen-Center-Gap) / 2));
  356. height:100%;
  357. }
  358.  
  359. /*----- TOP LEFT INTRO -----*/
  360. [intro]{
  361. display:flex;
  362. align-items:center;
  363. margin-bottom:var(--Intro-Bottom-Gap);
  364. }
  365.  
  366. [back-to-blog]{
  367. display:block;
  368. --Back-Icon-Padding:5px;
  369. }
  370.  
  371. [back-to-blog] svg {
  372. width:var(--Back-Icon-Size);
  373. height:var(--Back-Icon-Size);
  374. color:var(--Back-Icon-Color);
  375. }
  376.  
  377. [intro] > svg, [back-to-blog] + svg {
  378. margin-right:var(--Headphones-Icon-Right-Gap);
  379. width:var(--Headphones-Icon-Size);
  380. height:var(--Headphones-Icon-Size);
  381. color:var(--Headphones-Icon-Color);
  382. }
  383.  
  384. [intro] span {
  385. display:block;
  386. }
  387.  
  388. [intro-title]{
  389. font-family:var(--Intro-Title-Font);
  390. font-size:var(--Intro-Title-Size);
  391. color:var(--Intro-Title-Color);
  392. letter-spacing:0.03em;
  393. line-height:var(--Intro-Title-Line-Height);
  394. }
  395.  
  396. [intro-subtitle]{
  397. font-family:var(--Intro-Subtitle-Font);
  398. font-size:var(--Intro-Subtitle-Size);
  399. text-transform:uppercase;
  400. color:var(--Intro-Subtitle-Color);
  401. letter-spacing:0.1420em;
  402. line-height:var(--Intro-Subtitle-Line-Height);
  403. }
  404.  
  405. [intro-title] + [intro-subtitle]{
  406. margin-top:var(--Intro-Text-Spacing);
  407. }
  408.  
  409. /*------ PLAYLIST BUTTONS (TOP) ------*/
  410. [playlist-buttons] {
  411. margin-right:var(--Song-Row-Padding);
  412. }
  413.  
  414. [playlist-buttons], [playlist-buttons] > * {
  415. display:flex!important;
  416. align-items:center;
  417. cursor:pointer;
  418. }
  419.  
  420. [playlist-buttons] > * + * {
  421. margin-left:var(--Playlist-Buttons-Spacing);
  422. }
  423.  
  424. /*------ SHUFFLE BUTTON ------*/
  425. [shuffle-button] .ph {
  426. margin-right:var(--Shuffle-Icon-Right-Gap);
  427. font-size:var(--Shuffle-Icon-Size);
  428. color:var(--Shuffle-Icon-Color);
  429. }
  430.  
  431. [shuffle-button] [text]{
  432. font-family:var(--Shuffle-Text-Font);
  433. text-transform:uppercase;
  434. font-size:var(--Shuffle-Text-Size);
  435. letter-spacing:0.069em;
  436. color:var(--Shuffle-Text-Color);
  437. }
  438.  
  439. [shuffle-button]:active .ph {
  440. color:var(--Shuffle-CLICKED-Icon-Color);
  441. }
  442.  
  443. [shuffle-button]:active [text]{
  444. color:var(--Shuffle-CLICKED-Text-Color);
  445. }
  446.  
  447. /*------ PLAY-ALL BUTTON ------*/
  448. [play-all-button] .ph {
  449. margin-right:var(--PlayAll-Icon-Right-Gap);
  450. font-size:var(--PlayAll-Icon-Size);
  451. color:var(--PlayAll-Icon-Color);
  452. }
  453.  
  454. [play-all-button] [text]{
  455. font-family:var(--PlayAll-Text-Font);
  456. text-transform:uppercase;
  457. font-size:var(--PlayAll-Text-Size);
  458. letter-spacing:0.069em;
  459. color:var(--PlayAll-Text-Color);
  460. }
  461.  
  462. [play-all-button]:active .ph {
  463. color:var(--PlayAll-CLICKED-Icon-Color);
  464. }
  465.  
  466. [play-all-button]:active [text]{
  467. color:var(--PlayAll-CLICKED-Text-Color);
  468. }
  469.  
  470. @media(max-width:800px){
  471. [playlist-buttons] .ph {
  472. margin-right:0;
  473. }
  474.  
  475. [playlist-buttons] [text]{
  476. display:none;
  477. }
  478. }
  479.  
  480. /*----- PLAYLIST MAIN -----*/
  481. [playlist-main]{
  482. position:relative;
  483. height:100%;
  484. margin-left:calc(0px - var(--Song-Row-Padding));
  485. margin-right:calc(0px - var(--Scrollbar-Left-Gap));
  486. min-height:0;
  487. overflow:auto;
  488. padding-right:var(--Scrollbar-Left-Gap);
  489. }
  490.  
  491. ::-webkit-scrollbar {
  492. width:var(--Scrollbar-Width);
  493. height:var(--Scrollbar-Width);
  494. background-color:var(--Scrollbar-Background);
  495. }
  496.  
  497. ::-webkit-scrollbar-thumb {
  498. border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
  499. background-color:var(--Scrollbar-Thumb);
  500. }
  501.  
  502. ::-webkit-scrollbar-track {
  503. border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
  504. background-color:var(--Scrollbar-Track);
  505. }
  506.  
  507. ::-webkit-scrollbar-corner {
  508. background:var(--Scrollbar-Background);
  509. }
  510.  
  511. [song-row]{
  512. display:flex;
  513. align-items:center;
  514. justify-content:space-between;
  515. padding:var(--Song-Row-Padding) calc(var(--Song-Row-Padding) + 2px);
  516. border-radius:var(--Song-Row-Corner-Roundness);
  517. transition:background-color var(--Song-HOVER-Speed) ease-in-out;
  518. }
  519.  
  520. /*---------------*/
  521.  
  522. [playlist-main][fadein="yes"] [song-row]{
  523. opacity:0;
  524. animation:fadeIn ease-in;
  525. animation-fill-mode:forwards;
  526. animation-duration:var(--Playlist-FadeIn-Speed);
  527. }
  528.  
  529. @keyframes fadeIn {
  530. from {
  531. opacity:0;
  532. margin-top:var(--Playlist-FadeIn-Gap-Amount);
  533. }
  534.  
  535. to {
  536. opacity:1;
  537. margin-top:0px;
  538. }
  539. }
  540.  
  541. /*----- SONGS -----*/
  542. [song-row] * {
  543. cursor:default;
  544. }
  545.  
  546. [bootons]{
  547. position:relative;
  548. margin-right:var(--Music-Buttons-Right-Gap);
  549. width:var(--Music-Buttons-Size);
  550. height:var(--Music-Buttons-Size);
  551. }
  552.  
  553. [bootons] .ph {
  554. position:absolute;
  555. top:0;left:0;
  556. font-size:var(--Music-Buttons-Size);
  557. color:var(--Music-Buttons-Color);
  558. transition:color var(--Song-HOVER-Speed) ease-in-out, opacity 0s ease-in-out;
  559. }
  560.  
  561. .xpause {opacity:0;}
  562.  
  563. [song-name]{
  564. font-family:var(--Song-Name-Font);
  565. font-size:var(--Song-Name-Text-Size);
  566. color:var(--Song-Name-Text-Color);
  567. transition:color var(--Song-HOVER-Speed) ease-in-out;
  568. }
  569.  
  570. [song-duration]{
  571. padding-left:10px;
  572. font-family:var(--Song-Duration-Font);
  573. font-size:var(--Song-Duration-Text-Size);
  574. color:var(--Song-Duration-Text-Color);
  575. letter-spacing:0.08em;
  576. }
  577.  
  578. [song-duration] [colon]{
  579. margin:0 var(--Song-Duration-Colon-Spacing);
  580. }
  581.  
  582. /*----- SONGS: hover -----*/
  583. [song-row]:hover {
  584. background:var(--Song-HOVER-Background);
  585. }
  586.  
  587. [song-row]:hover .ph {
  588. color:var(--Song-HOVER-Buttons-Color);
  589. }
  590.  
  591. [song-row]:hover [song-name]{
  592. color:var(--Song-HOVER-Name-Color);
  593. }
  594.  
  595. /*----- SONGS: clicked -----*/
  596. .song-clickt {
  597. background:var(--Song-CLICKED-Background)!important;
  598. transition:background-color var(--Song-CLICKED-Speed) ease-in-out!important;
  599. }
  600.  
  601. .song-clickt .ph {
  602. color:var(--Song-CLICKED-Buttons-Color)!important;
  603. transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
  604. }
  605.  
  606. .song-clickt [song-name]{
  607. color:var(--Song-CLICKED-Name-Color)!important;
  608. transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
  609. }
  610.  
  611. .song-clickt [song-duration]{
  612. color:var(--Song-CLICKED-Duration-Color)!important;
  613. transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
  614. }
  615.  
  616. /*-------- ALBUM COVER & VINYL --------*/
  617. [main-page="true"] [lhcwt] > *:first-child {
  618. margin-top:24px;
  619. }
  620.  
  621. [sidebar-image]{
  622. position:relative;
  623. width:var(--Sidebar-Image-Width);
  624. margin-left:calc((100% - var(--Sidebar-Image-Width)) / 2);
  625. z-index:3;
  626. }
  627.  
  628. [sidebar-image] img {
  629. border-radius:var(--Sidebar-Image-Corner-Roundness);
  630. box-shadow:-0.7vw 1vw 4vw var(--Sidebar-Image-Shadow);
  631. }
  632.  
  633. [sidebar-image] img[src*="66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png"]{
  634. filter:brightness(87%) contrast(122%) hue-rotate(13deg);
  635. }
  636.  
  637. [vinyl-img]{
  638. position:absolute;
  639. top:0;left:0;
  640. margin-top:calc((100% - var(--Vinyl-Size)) / 2);
  641. width:var(--Vinyl-Size);
  642. transform-origin:center;
  643. border-radius:0!important;
  644. box-shadow:none!important;
  645. filter:brightness(120%) contrast(110%);
  646. z-index:-1;
  647. }
  648.  
  649. .rollin {
  650. animation:theyseemerollin ease-in;
  651. animation-fill-mode:forwards;
  652. animation-duration:var(--Vinyl-Load-In-Speed);
  653. animation-timing-function:cubic-bezier(0.6, 0, 0.2, 1.69);
  654. }
  655.  
  656. @keyframes theyseemerollin {
  657. from {
  658. margin-left:0px;
  659. transform:rotate(0deg);
  660.  
  661. }
  662.  
  663. to {
  664. margin-left:var(--Vinyl-Left-Gap);
  665. transform:rotate(45deg);
  666.  
  667. }
  668. }
  669.  
  670. .vinplayin {
  671. animation:haha var(--Vinyl-Spin-Speed) infinite;
  672. animation-timing-function:linear;
  673. }
  674.  
  675. @keyframes haha {
  676. from {
  677. margin-left:var(--Vinyl-Left-Gap);
  678. transform:rotate(45deg);
  679.  
  680. }
  681.  
  682. to {
  683. margin-left:var(--Vinyl-Left-Gap);
  684. transform:rotate(405deg);
  685.  
  686. }
  687. }
  688.  
  689. .vinpaused {
  690. animation-play-state:paused;
  691. }
  692.  
  693. /*-------- SIDEBAR TEXT --------*/
  694. [sidebar-image] + *:not([navbar]){
  695. margin-top:var(--Sidebar-Image-Bottom-Gap);
  696. }
  697.  
  698. [artist-name], [album-name], [description]{
  699. margin-left:calc((100% - var(--Sidebar-Text-Width)) / 2);
  700. width:var(--Sidebar-Text-Width);
  701. text-align:center;
  702. }
  703.  
  704. [artist-name]{
  705. font-family:var(--Artist-Name-Font);
  706. font-size:var(--Artist-Name-Size);
  707. color:var(--Artist-Name-Color);
  708. }
  709.  
  710. [album-name]{
  711. font-family:var(--Album-Name-Font);
  712. font-size:var(--Album-Name-Size);
  713. text-transform:uppercase;
  714. letter-spacing:0.1em;
  715. word-spacing:-0.05em;
  716. color:var(--Album-Name-Color);
  717. }
  718.  
  719. [artist-name] + [album-name]{
  720. margin-top:var(--Sidebar-Text-Spacing);
  721. }
  722.  
  723. [divider-line]{
  724. position:relative;
  725. margin:var(--Sidebar-Divider-Spacing) 0;
  726. margin-left:calc((100% - var(--Sidebar-Divider-Width)) / 2);
  727. width:var(--Sidebar-Divider-Width);
  728. height:var(--Sidebar-Divider-Thickness);
  729. background:var(--Sidebar-Divider-Color);
  730. border-radius:var(--Sidebar-Divider-Roundness);
  731. }
  732.  
  733. [divider-line][quote-mark="yes"]:before {
  734. content:"“";
  735. position:absolute;
  736. top:0;margin-top:calc(0px - (var(--Divider-QuoteMark-Size) / 4) + var(--Divider-QuoteMark-Gap-Top));
  737. right:0;margin-right:calc(100% + var(--Divider-QuoteMark-Gap-Right));
  738. font-family:var(--Divider-QuoteMark-Font);
  739. font-size:var(--Divider-QuoteMark-Size);
  740. color:var(--Divider-QuoteMark-Color);
  741. line-height:1em;
  742. }
  743.  
  744. [description]{
  745. font-family:var(--Description-Font);
  746. font-size:var(--Description-Text-Size);
  747. color:var(--Description-Text-Color);
  748. line-height:var(--Description-LineHeight);
  749. }
  750.  
  751. [description] b, [description] strong {
  752. font-weight:normal;
  753. -webkit-text-stroke-color:var(--Description-Bold);
  754. -webkit-text-stroke-width:.5px;
  755. letter-spacing:0.015em;
  756. }
  757.  
  758. [description] i, [description] em {
  759. color:var(--Description-Italic);
  760. }
  761.  
  762. [description] a {
  763. padding-bottom:1.5px;
  764. border-bottom:1px solid var(--Description-Links-Underline);
  765. color:var(--Description-Links);
  766. }
  767.  
  768. [description] [glitch]{
  769. font-family:sans-serif;
  770. position:relative;
  771. display:inline-block;
  772. margin-left:1px;
  773. }
  774.  
  775. [description] [glitch]:before {
  776. content:"";
  777. position:absolute;
  778. top:50%;left:0;
  779. transform:translateY(-50%);
  780. width:110%;
  781. margin-left:-5%;
  782. height:1px;
  783. background:linear-gradient(to right, transparent 0%, transparent 10%, var(--Description-Text-Color) 40%, var(--Description-Text-Color) 90%, transparent);
  784. transform:rotate(-3deg);
  785. }
  786.  
  787. /*----- CUSTOM LINKS BAR -----*/
  788. [navbar]{
  789. position:absolute;
  790. bottom:0;
  791. left:0;margin-left:calc(((100% - var(--Navbar-Width)) / 2) + 5px);
  792.  
  793. width:var(--Navbar-Width);
  794. border-radius:var(--Navbar-Corner-Roundness);
  795. overflow:hidden;
  796. box-shadow:-0.7vw 1vw 1.5vw var(--Navbar-Box-Shadow);
  797. z-index:4;
  798. }
  799.  
  800. [navbar]:before {
  801. content:"";
  802. position:absolute;
  803. top:0;left:0;
  804. width:var(--Navbar-Stripe-1-Width);
  805. height:100%;
  806. background:var(--Navbar-Stripe-1-Color);
  807. }
  808.  
  809. [navbar]:after {
  810. content:"";
  811. position:absolute;
  812. top:0;left:0;
  813. margin-left:var(--Navbar-Stripe-1-Width);
  814. width:var(--Navbar-Stripe-2-Width);
  815. height:100%;
  816. background:var(--Navbar-Stripe-2-Color);
  817. border-left:var(--Navbar-Stripe-Spacing) solid var(--Navbar-Background);
  818. }
  819.  
  820. [lb-bg]{
  821. margin-left:calc(var(--Navbar-Stripe-1-Width) + var(--Navbar-Stripe-Spacing) + var(--Navbar-Stripe-2-Width));
  822. height:100%;
  823. padding:calc(var(--Navbar-Padding) - var(--qugiw)) var(--Navbar-Padding);
  824. background:var(--Navbar-Background);
  825. display:flex;
  826. align-items:center;
  827. justify-content:space-between;
  828. box-sizing:border-box;
  829. }
  830.  
  831. [bar-title]{
  832. font-family:var(--Navbar-Title-Font);
  833. font-size:var(--Navbar-Title-Size);
  834. letter-spacing:0.02em;
  835. color:var(--Navbar-Title-Color);
  836. }
  837.  
  838. [bar-title] + [some-links]{
  839. margin-left:8px;
  840. }
  841.  
  842. [some-links]{
  843. display:flex;
  844. align-items:center;
  845. flex-wrap:wrap;
  846. font-family:var(--Navbar-Links-Font);
  847. font-size:var(--Navbar-Links-Size);
  848. text-transform:uppercase;
  849. letter-spacing:0.03em;
  850. margin-right:calc(var(--Navbar-Links-Divider-Spacing) / -4);
  851. }
  852.  
  853. [some-links] a {
  854. display:block;
  855. margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
  856. flex-shrink:0;
  857. color:var(--Navbar-Links-Color);
  858. }
  859.  
  860. [some-links] [divider]{
  861. margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
  862. font-size:var(--Navbar-Links-Divider-Size);
  863. color:var(--Navbar-Links-Divider-Color);
  864. }
  865.  
  866. [some-links][align="right"]{
  867. justify-content:flex-end;
  868. text-align:right;
  869. }
  870.  
  871. [some-links][align="center"]{
  872. justify-content:center;
  873. text-align:center;
  874. }
  875.  
  876. [some-links][align="left"]{
  877. justify-content:flex-start;
  878. text-align:left;
  879. }
  880.  
  881. /* end style */
  882. </style>
  883.  
  884. </head>
  885.  
  886. <body>
  887.  
  888. <!-- CREDIT || PLEASE DO NOT REMOVE -->
  889. <a class="crdz" href="//glenthemes.tumblr.com" title="&#x2756; Melodic Wish &#x2756; by glenthemes"></a>
  890.  
  891. <div maincont>
  892. <div leftstuff>
  893.  
  894. <!----- TOP LEFT INTRO ----->
  895. <div intro>
  896.  
  897. <a back-to-blog href="/" title="back to blog" icon-name="chevron-left"></a>
  898.  
  899. <span icon-name="headphones"></span>
  900.  
  901. <span intro-title> Melodic Wish </span>
  902. <span intro-subtitle> favorite nier tracks </span>
  903.  
  904. <span playlist-buttons>
  905. <span shuffle-button>shuffle</span>
  906. <span play-all-button>play all</span>
  907. </span>
  908. </div><!--end intro // don't delete-->
  909.  
  910.  
  911. <!---------------------------------->
  912.  
  913.  
  914. <!----- PLAYLIST / SONGS ----->
  915. <!--
  916. HOW TO ADD YOUR OWN MUSIC:
  917. https://linktr.ee/direct_file_links
  918. -->
  919. <div playlist-main>
  920.  
  921. <!---- START A NEW SONG ---->
  922. <div song-row>
  923. <span song-name>Alien Manifestation (Instrumental)</span>
  924. <audio src="https://rhizo.gitlab.io/nier/Alien_Manifestation__Instrumental_.mp3" volume="100%"></audio>
  925. </div><!--end a song // don't delete-->
  926.  
  927. <!---- START A NEW SONG ---->
  928. <div song-row>
  929. <span song-name>Bipolar Nightmare</span>
  930. <audio src="https://rhizo.gitlab.io/nier/Bipolar_Nightmare.mp3" volume="80%"></audio>
  931. </div><!--end a song // don't delete-->
  932.  
  933. </div><!--end playlist // don't delete-->
  934. </div><!--end leftstuff // don't delete-->
  935.  
  936. <!---------------------------------->
  937.  
  938. <div rightstuff>
  939. <!------ SIDEBAR IMAGE ------>
  940. <div sidebar-image vinyl="yes">
  941. <img src="https://66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png">
  942. </div>
  943.  
  944. <!------ SIDEBAR TEXT ------>
  945. <div artist-name>Keiichi Okabe</div>
  946. <div album-name>NieR: Automata OST</div>
  947.  
  948. <div divider-line quote-mark="yes"></div>
  949.  
  950. <div description>
  951.  
  952. Here is your description!
  953. <b>bold</b>,
  954. <i>italic</i>,
  955. <a href="https://demo.tumblr.com">sample link</a>
  956.  
  957. </div><!--end description // don't delete-->
  958.  
  959. <!------ NAVBAR ------>
  960. <div navbar>
  961. <span bar-title>Please select an item.</span>
  962.  
  963. <div some-links align="right">
  964.  
  965. <a href="/">home</a>
  966. <a href="/ask">message</a>
  967. <a href="/archive">archive</a>
  968.  
  969. </div><!--end links-->
  970. </div><!--end navbar-->
  971.  
  972. </div><!--end rightstuff-->
  973. </div><!--end maincont-->
  974.  
  975.  
  976. <script>feather.replace()</script>
  977. </body>
  978.  
  979. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!