979 lines
25 KiB
Plaintext
979 lines
25 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
Music Page [02]: Melodic Wish
|
|
Made by glenthemes
|
|
|
|
Initial release: 2019/05/03
|
|
Revamp date: 2022/03/25
|
|
Last updated: 2023/05/11
|
|
|
|
TERMS OF USE:
|
|
1) Do not remove the credit.
|
|
2) Do not repost/redistribute.
|
|
3) Do not take parts of the code and use them as your own.
|
|
4) Do not use my works as a base code.
|
|
5) Do not mix my works together.
|
|
|
|
HOW TO USE:
|
|
https://docs.google.com/presentation/d/1VPynhrrjrrgED_WfqKW4BK0QD8O96lYJB_NV82Wq_QE/edit?usp=sharing
|
|
|
|
CREDITS:
|
|
(ﾉ´ヮ´)ﾉ*:･ﾟ✧ ~ glencredits.tumblr.com/melodic-wish
|
|
------------------------------------------------------------------------>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>{Title}</title>
|
|
|
|
<link rel="shortcut icon" href="{Favicon}">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!------- JQUERY ------->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
|
|
|
<!------- FONTS ------->
|
|
<link href="https://fonts.googleapis.com/css?family=Philosopher|Work+Sans|Quicksand:500|Rubik:300,400|Newsreader" rel="stylesheet">
|
|
|
|
<link rel="preload" href="//glen-assets.github.io/fonts/Ra-Mono.otf" as="font" type="font/otf" crossorigin>
|
|
|
|
<!------- ICON LIBRARIES ------->
|
|
<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
|
|
|
<script src="https://unpkg.com/phosphor-icons"></script>
|
|
|
|
<!------- ESSENTIALS ------->
|
|
<script src="//static.tumblr.com/snld4jp/adOr5n1p5/malihu-tooltips.js"></script>
|
|
|
|
<link href="https://glen-themes.gitlab.io/music-pages/02/mwish.css" rel="stylesheet">
|
|
|
|
<script src="https://glen-themes.gitlab.io/music-pages/02/mwish.js"></script>
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face { font-family: "ra mono"; src: url("//glen-assets.github.io/fonts/Ra-Mono.otf"); }
|
|
|
|
/*----- TOOLTIPS -----*/
|
|
#s-m-t-tooltip {
|
|
padding:5px 10px;
|
|
margin:20px;
|
|
background-color:var(--Tooltips-BG);
|
|
border-radius:2px;
|
|
font-family:var(--Tooltips-Font);
|
|
font-size:var(--Tooltips-Text-Size);
|
|
letter-spacing:0.06em;
|
|
text-transform:uppercase;
|
|
color:var(--Tooltips-Text);
|
|
z-index:99;
|
|
max-width:40vw;
|
|
}
|
|
|
|
/*----- TUMBLR CONTROLS -----*/
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:calc(var(--Screen-Padding) - (8px * var(--TumblrControls-Resize-Factor)))!important;
|
|
right:calc(var(--Screen-Padding) - (15px * var(--TumblrControls-Resize-Factor)))!important;
|
|
position:fixed!important;
|
|
|
|
--TumblrControls-Resize-Factor:0.69;
|
|
transform:scale(var(--TumblrControls-Resize-Factor),var(--TumblrControls-Resize-Factor));
|
|
|
|
transform-origin:100% 0;
|
|
opacity:calc(100% - var(--TumblrControls-Transparency));
|
|
z-index:999999!important;
|
|
}
|
|
|
|
[tumblr-controls="black"] #iframe_tumblr_controls,
|
|
[tumblr-controls="black"] .iframe-controls--desktop {
|
|
filter:invert(100%) hue-rotate(180deg)!important;
|
|
-webkit-filter:invert(100%) hue-rotate(180deg)!important;
|
|
}
|
|
|
|
/*----- TEXT HIGHLIGHT -----*/
|
|
::selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text-Color);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:var(--Highlighted-Text-BG);
|
|
color:var(--Highlighted-Text-Color);
|
|
}
|
|
|
|
/*----- BASICS -----*/
|
|
html, body {overflow:hidden;}
|
|
|
|
body {
|
|
/* ignore this */
|
|
|
|
opacity:0;
|
|
transition:opacity 0.420s ease-in-out;
|
|
text-align:left;
|
|
}
|
|
|
|
|
|
|
|
/*----- CUSTOMIZATION OPTIONS -----*/
|
|
|
|
body {
|
|
background-color:#222;
|
|
|
|
background-image:url("");
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
}
|
|
|
|
:root {
|
|
|
|
/*--- GENERAL SETTINGS ---*/
|
|
--Show-Guide-Message:yes;
|
|
|
|
--Screen-Padding:45px;
|
|
--Screen-Left-Width:50%;
|
|
--Screen-Right-Width:50%;
|
|
--Screen-Center-Gap:69px;
|
|
|
|
/*--- TOP LEFT INTRO ---*/
|
|
--Back-Icon-Size:20px;
|
|
--Back-Icon-Color:#ccc;
|
|
--Back-Icon-Right-Gap:13px;
|
|
|
|
--Headphones-Icon-Size:30px;
|
|
--Headphones-Icon-Color:#ccc;
|
|
--Headphones-Icon-Right-Gap:17px;
|
|
|
|
--Intro-Title-Font:"philosopher";
|
|
--Intro-Title-Color:#ccc;
|
|
--Intro-Title-Size:15px;
|
|
|
|
--Intro-Subtitle-Font:"quicksand";
|
|
--Intro-Subtitle-Color:#aaa;
|
|
--Intro-Subtitle-Size:9px;
|
|
|
|
--Intro-Text-Spacing:2px;
|
|
|
|
/*--- SHUFFLE BUTTON SETTINGS ---*/
|
|
--Shuffle-Icon-Size:15px;
|
|
--Shuffle-Icon-Color:#bbb;
|
|
--Shuffle-Icon-Right-Gap:6px;
|
|
--Shuffle-Text-Font:"rubik";
|
|
--Shuffle-Text-Size:10px;
|
|
--Shuffle-Text-Color:#ccc;
|
|
|
|
--Shuffle-CLICKED-Icon-Color:#ccbba8;
|
|
--Shuffle-CLICKED-Text-Color:#ccbba8;
|
|
|
|
/*--- PLAY-ALL BUTTON SETTINGS ---*/
|
|
--PlayAll-Icon-Size:15px;
|
|
--PlayAll-Icon-Color:#bbb;
|
|
--PlayAll-Icon-Right-Gap:6px;
|
|
--PlayAll-Text-Font:"rubik";
|
|
--PlayAll-Text-Size:10px;
|
|
--PlayAll-Text-Color:#ccc;
|
|
|
|
--PlayAll-CLICKED-Icon-Color:#ccbba8;
|
|
--PlayAll-CLICKED-Text-Color:#ccbba8;
|
|
|
|
--Playlist-Buttons-Spacing:18px;
|
|
|
|
--Intro-Bottom-Gap:40px;
|
|
|
|
/*--- PLAYLIST SETTINGS ---*/
|
|
--Playlist-FadeIn:yes;
|
|
--Playlist-FadeIn-Gap-Amount:22px;
|
|
--Playlist-FadeIn-Speed:420ms; /* ms only */
|
|
--Playlist-FadeIn-Step-Delay:50ms; /* ms only */
|
|
|
|
--Song-Row-Padding:16px;
|
|
--Song-Row-Corner-Roundness:2px;
|
|
|
|
--Music-Buttons-Size:12px;
|
|
--Music-Buttons-Style:"filled"; /* can be "filled" or "hollow" */
|
|
--Music-Buttons-Color:#ccc;
|
|
--Music-Buttons-Right-Gap:13px;
|
|
|
|
--Song-Name-Font:"work sans";
|
|
--Song-Name-Text-Size:12px;
|
|
--Song-Name-Text-Color:#ccc;
|
|
|
|
--Song-Duration-Font:"ra mono";
|
|
--Song-Duration-Text-Size:11px;
|
|
--Song-Duration-Text-Color:#ccc;
|
|
--Song-Duration-Colon-Spacing:-0.5px;
|
|
|
|
--Song-HOVER-Background:#333;
|
|
--Song-HOVER-Buttons-Color:#eee;
|
|
--Song-HOVER-Name-Color:#eee;
|
|
--Song-HOVER-Duration-Color:#eee;
|
|
--Song-HOVER-Speed:269ms;
|
|
|
|
--Song-CLICKED-Background:transparent;
|
|
--Song-CLICKED-Buttons-Color:#ccbba8;
|
|
--Song-CLICKED-Name-Color:#ccbba8;
|
|
--Song-CLICKED-Duration-Color:#ccbba8;
|
|
--Song-CLICKED-Speed:400ms;
|
|
|
|
/*--- AUTOPLAY OPTIONS ---*/
|
|
--Autoplay-First-Song:no;
|
|
--Autoplay-Next-Song:yes;
|
|
--Loop-Playlist:yes;
|
|
|
|
/*--- SCROLLBAR SETTINGS ---*/
|
|
--Scrollbar-Left-Gap:8px;
|
|
--Scrollbar-Thumb:#989395;
|
|
--Scrollbar-Track:#393738;
|
|
--Scrollbar-Background:#222;
|
|
--Scrollbar-Width:13px;
|
|
|
|
/*--- SIDEBAR IMAGE SETTINGS ---*/
|
|
--Sidebar-Image-Width:220px;
|
|
--Sidebar-Image-Corner-Roundness:3px;
|
|
--Sidebar-Image-Shadow:#252525;
|
|
--Sidebar-Image-Bottom-Gap:30px;
|
|
|
|
/*--- VINYL SETTINGS ---*/
|
|
--Vinyl-Left-Gap:50%;
|
|
--Vinyl-Size:90%;
|
|
|
|
--Vinyl-Load-In-Speed:1.1s;
|
|
--Vinyl-Spin-Speed:2s;
|
|
|
|
/*--- SIDEBAR TEXT SETTINGS ---*/
|
|
--Sidebar-Text-Width:220px;
|
|
--Sidebar-Text-Spacing:7px;
|
|
|
|
--Artist-Name-Font:"work sans";
|
|
--Artist-Name-Size:13px;
|
|
--Artist-Name-Color:#d7d2cf;
|
|
|
|
--Album-Name-Font:"quicksand";
|
|
--Album-Name-Size:11px;
|
|
--Album-Name-Color:#aaa;
|
|
|
|
--Sidebar-Divider-Spacing:25px;
|
|
--Sidebar-Divider-Width:150px;
|
|
--Sidebar-Divider-Thickness:2px;
|
|
--Sidebar-Divider-Color:#b4af9a;
|
|
--Sidebar-Divider-Roundness:4px;
|
|
|
|
--Divider-QuoteMark-Font:"newsreader";
|
|
--Divider-QuoteMark-Size:45px;
|
|
--Divider-QuoteMark-Color:#ccc;
|
|
--Divider-QuoteMark-Gap-Top:4px;
|
|
--Divider-QuoteMark-Gap-Right:17px;
|
|
|
|
--Description-Font:"work sans";
|
|
--Description-Text-Size:12.5px;
|
|
--Description-Text-Color:#bbb;
|
|
--Description-Italic:#b2b69a;
|
|
--Description-Bold:#c5b8a3;
|
|
--Description-Links:#a5b089;
|
|
--Description-Links-Underline:#555;
|
|
--Description-LineHeight:200%;
|
|
|
|
/*--- NAVBAR SETTINGS ---*/
|
|
--Navbar-Width:80%;
|
|
--Navbar-Background:#323232;
|
|
--Navbar-Padding:15px;
|
|
--Navbar-Corner-Roundness:2px;
|
|
--Navbar-Box-Shadow:#181818;
|
|
|
|
--Navbar-Stripe-1-Width:6px;
|
|
--Navbar-Stripe-1-Color:#b4af9a;
|
|
|
|
--Navbar-Stripe-Spacing:4px;
|
|
|
|
--Navbar-Stripe-2-Width:1px;
|
|
--Navbar-Stripe-2-Color:#b4af9a;
|
|
|
|
--Navbar-Title-Font:"philosopher";
|
|
--Navbar-Title-Size:12px;
|
|
--Navbar-Title-Color:#d7d2cf;
|
|
|
|
--Navbar-Links-Font:"work sans";
|
|
--Navbar-Links-Size:10px;
|
|
--Navbar-Links-Color:#cfc4bd;
|
|
|
|
--Navbar-Links-Divider:"✧";
|
|
--Navbar-Links-Divider-Size:11px;
|
|
--Navbar-Links-Divider-Color:#ccc;
|
|
--Navbar-Links-Divider-Spacing:14px;
|
|
|
|
/*--- TOOLTIPS ---*/
|
|
--Tooltips-BG:#333;
|
|
--Tooltips-Font:"work sans";
|
|
--Tooltips-Text-Size:9px;
|
|
--Tooltips-Text:#ccc;
|
|
|
|
/*--- TEXT HIGHLIGHT ---*/
|
|
--Highlighted-Text-BG:#4f4b41;
|
|
--Highlighted-Text-Color:inherit;
|
|
|
|
/*--- TUMBLR CONTROLS ---*/
|
|
--TumblrControls-Color:white;
|
|
--TumblrControls-Transparency:30%; /* % only */
|
|
|
|
/*--- CREDIT SETTINGS ---*/
|
|
--Credit-Corner-Gap:13px;
|
|
--Credit-Area-Size:16px;
|
|
--Credit-Dots-Size:4px;
|
|
--Credit-Dots-Color:#908c7b;
|
|
|
|
/* end root // end :root */
|
|
}
|
|
|
|
/* what you see in customize page view */
|
|
/* you can edit or remove this as you like */
|
|
[customize-page="true"]:root {
|
|
--Screen-Padding:5vw;
|
|
--Screen-Center-Gap:5vw;
|
|
}
|
|
|
|
/*----- CONTAINER STUFF -----*/
|
|
[maincont]{
|
|
position:absolute;
|
|
top:0;margin-top:var(--Screen-Padding);
|
|
left:0;margin-left:var(--Screen-Padding);
|
|
width:calc(100vw - (var(--Screen-Padding) * 2));
|
|
height:calc(100vh - (var(--Screen-Padding) * 2));
|
|
}
|
|
|
|
[leftstuff]{
|
|
position:absolute;
|
|
width:calc(var(--Screen-Left-Width) - (var(--Screen-Center-Gap) / 2));
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
|
|
[rightstuff]{
|
|
position:absolute;
|
|
right:0;
|
|
width:calc(var(--Screen-Right-Width) - (var(--Screen-Center-Gap) / 2));
|
|
height:100%;
|
|
}
|
|
|
|
/*----- TOP LEFT INTRO -----*/
|
|
[intro]{
|
|
display:flex;
|
|
align-items:center;
|
|
margin-bottom:var(--Intro-Bottom-Gap);
|
|
}
|
|
|
|
[back-to-blog]{
|
|
display:block;
|
|
--Back-Icon-Padding:5px;
|
|
}
|
|
|
|
[back-to-blog] svg {
|
|
width:var(--Back-Icon-Size);
|
|
height:var(--Back-Icon-Size);
|
|
color:var(--Back-Icon-Color);
|
|
}
|
|
|
|
[intro] > svg, [back-to-blog] + svg {
|
|
margin-right:var(--Headphones-Icon-Right-Gap);
|
|
width:var(--Headphones-Icon-Size);
|
|
height:var(--Headphones-Icon-Size);
|
|
color:var(--Headphones-Icon-Color);
|
|
}
|
|
|
|
[intro] span {
|
|
display:block;
|
|
}
|
|
|
|
[intro-title]{
|
|
font-family:var(--Intro-Title-Font);
|
|
font-size:var(--Intro-Title-Size);
|
|
color:var(--Intro-Title-Color);
|
|
letter-spacing:0.03em;
|
|
line-height:var(--Intro-Title-Line-Height);
|
|
}
|
|
|
|
[intro-subtitle]{
|
|
font-family:var(--Intro-Subtitle-Font);
|
|
font-size:var(--Intro-Subtitle-Size);
|
|
text-transform:uppercase;
|
|
color:var(--Intro-Subtitle-Color);
|
|
letter-spacing:0.1420em;
|
|
line-height:var(--Intro-Subtitle-Line-Height);
|
|
}
|
|
|
|
[intro-title] + [intro-subtitle]{
|
|
margin-top:var(--Intro-Text-Spacing);
|
|
}
|
|
|
|
/*------ PLAYLIST BUTTONS (TOP) ------*/
|
|
[playlist-buttons] {
|
|
margin-right:var(--Song-Row-Padding);
|
|
}
|
|
|
|
[playlist-buttons], [playlist-buttons] > * {
|
|
display:flex!important;
|
|
align-items:center;
|
|
cursor:pointer;
|
|
}
|
|
|
|
[playlist-buttons] > * + * {
|
|
margin-left:var(--Playlist-Buttons-Spacing);
|
|
}
|
|
|
|
/*------ SHUFFLE BUTTON ------*/
|
|
[shuffle-button] .ph {
|
|
margin-right:var(--Shuffle-Icon-Right-Gap);
|
|
font-size:var(--Shuffle-Icon-Size);
|
|
color:var(--Shuffle-Icon-Color);
|
|
}
|
|
|
|
[shuffle-button] [text]{
|
|
font-family:var(--Shuffle-Text-Font);
|
|
text-transform:uppercase;
|
|
font-size:var(--Shuffle-Text-Size);
|
|
letter-spacing:0.069em;
|
|
color:var(--Shuffle-Text-Color);
|
|
}
|
|
|
|
[shuffle-button]:active .ph {
|
|
color:var(--Shuffle-CLICKED-Icon-Color);
|
|
}
|
|
|
|
[shuffle-button]:active [text]{
|
|
color:var(--Shuffle-CLICKED-Text-Color);
|
|
}
|
|
|
|
/*------ PLAY-ALL BUTTON ------*/
|
|
[play-all-button] .ph {
|
|
margin-right:var(--PlayAll-Icon-Right-Gap);
|
|
font-size:var(--PlayAll-Icon-Size);
|
|
color:var(--PlayAll-Icon-Color);
|
|
}
|
|
|
|
[play-all-button] [text]{
|
|
font-family:var(--PlayAll-Text-Font);
|
|
text-transform:uppercase;
|
|
font-size:var(--PlayAll-Text-Size);
|
|
letter-spacing:0.069em;
|
|
color:var(--PlayAll-Text-Color);
|
|
}
|
|
|
|
[play-all-button]:active .ph {
|
|
color:var(--PlayAll-CLICKED-Icon-Color);
|
|
}
|
|
|
|
[play-all-button]:active [text]{
|
|
color:var(--PlayAll-CLICKED-Text-Color);
|
|
}
|
|
|
|
@media(max-width:800px){
|
|
[playlist-buttons] .ph {
|
|
margin-right:0;
|
|
}
|
|
|
|
[playlist-buttons] [text]{
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
/*----- PLAYLIST MAIN -----*/
|
|
[playlist-main]{
|
|
position:relative;
|
|
height:100%;
|
|
margin-left:calc(0px - var(--Song-Row-Padding));
|
|
margin-right:calc(0px - var(--Scrollbar-Left-Gap));
|
|
min-height:0;
|
|
overflow:auto;
|
|
padding-right:var(--Scrollbar-Left-Gap);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width:var(--Scrollbar-Width);
|
|
height:var(--Scrollbar-Width);
|
|
background-color:var(--Scrollbar-Background);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
|
|
background-color:var(--Scrollbar-Thumb);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
border:calc((var(--Scrollbar-Width) - 1px) / 2) solid var(--Scrollbar-Background);
|
|
background-color:var(--Scrollbar-Track);
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background:var(--Scrollbar-Background);
|
|
}
|
|
|
|
[song-row]{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
padding:var(--Song-Row-Padding) calc(var(--Song-Row-Padding) + 2px);
|
|
border-radius:var(--Song-Row-Corner-Roundness);
|
|
transition:background-color var(--Song-HOVER-Speed) ease-in-out;
|
|
}
|
|
|
|
/*---------------*/
|
|
|
|
[playlist-main][fadein="yes"] [song-row]{
|
|
opacity:0;
|
|
animation:fadeIn ease-in;
|
|
animation-fill-mode:forwards;
|
|
animation-duration:var(--Playlist-FadeIn-Speed);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity:0;
|
|
margin-top:var(--Playlist-FadeIn-Gap-Amount);
|
|
}
|
|
|
|
to {
|
|
opacity:1;
|
|
margin-top:0px;
|
|
}
|
|
}
|
|
|
|
/*----- SONGS -----*/
|
|
[song-row] * {
|
|
cursor:default;
|
|
}
|
|
|
|
[bootons]{
|
|
position:relative;
|
|
margin-right:var(--Music-Buttons-Right-Gap);
|
|
width:var(--Music-Buttons-Size);
|
|
height:var(--Music-Buttons-Size);
|
|
}
|
|
|
|
[bootons] .ph {
|
|
position:absolute;
|
|
top:0;left:0;
|
|
font-size:var(--Music-Buttons-Size);
|
|
color:var(--Music-Buttons-Color);
|
|
transition:color var(--Song-HOVER-Speed) ease-in-out, opacity 0s ease-in-out;
|
|
}
|
|
|
|
.xpause {opacity:0;}
|
|
|
|
[song-name]{
|
|
font-family:var(--Song-Name-Font);
|
|
font-size:var(--Song-Name-Text-Size);
|
|
color:var(--Song-Name-Text-Color);
|
|
transition:color var(--Song-HOVER-Speed) ease-in-out;
|
|
}
|
|
|
|
[song-duration]{
|
|
padding-left:10px;
|
|
font-family:var(--Song-Duration-Font);
|
|
font-size:var(--Song-Duration-Text-Size);
|
|
color:var(--Song-Duration-Text-Color);
|
|
letter-spacing:0.08em;
|
|
}
|
|
|
|
[song-duration] [colon]{
|
|
margin:0 var(--Song-Duration-Colon-Spacing);
|
|
}
|
|
|
|
/*----- SONGS: hover -----*/
|
|
[song-row]:hover {
|
|
background:var(--Song-HOVER-Background);
|
|
}
|
|
|
|
[song-row]:hover .ph {
|
|
color:var(--Song-HOVER-Buttons-Color);
|
|
}
|
|
|
|
[song-row]:hover [song-name]{
|
|
color:var(--Song-HOVER-Name-Color);
|
|
}
|
|
|
|
/*----- SONGS: clicked -----*/
|
|
.song-clickt {
|
|
background:var(--Song-CLICKED-Background)!important;
|
|
transition:background-color var(--Song-CLICKED-Speed) ease-in-out!important;
|
|
}
|
|
|
|
.song-clickt .ph {
|
|
color:var(--Song-CLICKED-Buttons-Color)!important;
|
|
transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
|
|
}
|
|
|
|
.song-clickt [song-name]{
|
|
color:var(--Song-CLICKED-Name-Color)!important;
|
|
transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
|
|
}
|
|
|
|
.song-clickt [song-duration]{
|
|
color:var(--Song-CLICKED-Duration-Color)!important;
|
|
transition:color var(--Song-CLICKED-Speed) ease-in-out!important;
|
|
}
|
|
|
|
/*-------- ALBUM COVER & VINYL --------*/
|
|
[main-page="true"] [lhcwt] > *:first-child {
|
|
margin-top:24px;
|
|
}
|
|
|
|
[sidebar-image]{
|
|
position:relative;
|
|
width:var(--Sidebar-Image-Width);
|
|
margin-left:calc((100% - var(--Sidebar-Image-Width)) / 2);
|
|
z-index:3;
|
|
}
|
|
|
|
[sidebar-image] img {
|
|
border-radius:var(--Sidebar-Image-Corner-Roundness);
|
|
box-shadow:-0.7vw 1vw 4vw var(--Sidebar-Image-Shadow);
|
|
}
|
|
|
|
[sidebar-image] img[src*="66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png"]{
|
|
filter:brightness(87%) contrast(122%) hue-rotate(13deg);
|
|
}
|
|
|
|
[vinyl-img]{
|
|
position:absolute;
|
|
top:0;left:0;
|
|
margin-top:calc((100% - var(--Vinyl-Size)) / 2);
|
|
width:var(--Vinyl-Size);
|
|
transform-origin:center;
|
|
border-radius:0!important;
|
|
box-shadow:none!important;
|
|
filter:brightness(120%) contrast(110%);
|
|
z-index:-1;
|
|
}
|
|
|
|
.rollin {
|
|
animation:theyseemerollin ease-in;
|
|
animation-fill-mode:forwards;
|
|
animation-duration:var(--Vinyl-Load-In-Speed);
|
|
animation-timing-function:cubic-bezier(0.6, 0, 0.2, 1.69);
|
|
}
|
|
|
|
@keyframes theyseemerollin {
|
|
from {
|
|
margin-left:0px;
|
|
transform:rotate(0deg);
|
|
|
|
}
|
|
|
|
to {
|
|
margin-left:var(--Vinyl-Left-Gap);
|
|
transform:rotate(45deg);
|
|
|
|
}
|
|
}
|
|
|
|
.vinplayin {
|
|
animation:haha var(--Vinyl-Spin-Speed) infinite;
|
|
animation-timing-function:linear;
|
|
}
|
|
|
|
@keyframes haha {
|
|
from {
|
|
margin-left:var(--Vinyl-Left-Gap);
|
|
transform:rotate(45deg);
|
|
|
|
}
|
|
|
|
to {
|
|
margin-left:var(--Vinyl-Left-Gap);
|
|
transform:rotate(405deg);
|
|
|
|
}
|
|
}
|
|
|
|
.vinpaused {
|
|
animation-play-state:paused;
|
|
}
|
|
|
|
/*-------- SIDEBAR TEXT --------*/
|
|
[sidebar-image] + *:not([navbar]){
|
|
margin-top:var(--Sidebar-Image-Bottom-Gap);
|
|
}
|
|
|
|
[artist-name], [album-name], [description]{
|
|
margin-left:calc((100% - var(--Sidebar-Text-Width)) / 2);
|
|
width:var(--Sidebar-Text-Width);
|
|
text-align:center;
|
|
}
|
|
|
|
[artist-name]{
|
|
font-family:var(--Artist-Name-Font);
|
|
font-size:var(--Artist-Name-Size);
|
|
color:var(--Artist-Name-Color);
|
|
}
|
|
|
|
[album-name]{
|
|
font-family:var(--Album-Name-Font);
|
|
font-size:var(--Album-Name-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:0.1em;
|
|
word-spacing:-0.05em;
|
|
color:var(--Album-Name-Color);
|
|
}
|
|
|
|
[artist-name] + [album-name]{
|
|
margin-top:var(--Sidebar-Text-Spacing);
|
|
}
|
|
|
|
[divider-line]{
|
|
position:relative;
|
|
margin:var(--Sidebar-Divider-Spacing) 0;
|
|
margin-left:calc((100% - var(--Sidebar-Divider-Width)) / 2);
|
|
width:var(--Sidebar-Divider-Width);
|
|
height:var(--Sidebar-Divider-Thickness);
|
|
background:var(--Sidebar-Divider-Color);
|
|
border-radius:var(--Sidebar-Divider-Roundness);
|
|
}
|
|
|
|
[divider-line][quote-mark="yes"]:before {
|
|
content:"“";
|
|
position:absolute;
|
|
top:0;margin-top:calc(0px - (var(--Divider-QuoteMark-Size) / 4) + var(--Divider-QuoteMark-Gap-Top));
|
|
right:0;margin-right:calc(100% + var(--Divider-QuoteMark-Gap-Right));
|
|
font-family:var(--Divider-QuoteMark-Font);
|
|
font-size:var(--Divider-QuoteMark-Size);
|
|
color:var(--Divider-QuoteMark-Color);
|
|
line-height:1em;
|
|
}
|
|
|
|
[description]{
|
|
font-family:var(--Description-Font);
|
|
font-size:var(--Description-Text-Size);
|
|
color:var(--Description-Text-Color);
|
|
line-height:var(--Description-LineHeight);
|
|
}
|
|
|
|
[description] b, [description] strong {
|
|
font-weight:normal;
|
|
-webkit-text-stroke-color:var(--Description-Bold);
|
|
-webkit-text-stroke-width:.5px;
|
|
letter-spacing:0.015em;
|
|
}
|
|
|
|
[description] i, [description] em {
|
|
color:var(--Description-Italic);
|
|
}
|
|
|
|
[description] a {
|
|
padding-bottom:1.5px;
|
|
border-bottom:1px solid var(--Description-Links-Underline);
|
|
color:var(--Description-Links);
|
|
}
|
|
|
|
[description] [glitch]{
|
|
font-family:sans-serif;
|
|
position:relative;
|
|
display:inline-block;
|
|
margin-left:1px;
|
|
}
|
|
|
|
[description] [glitch]:before {
|
|
content:"";
|
|
position:absolute;
|
|
top:50%;left:0;
|
|
transform:translateY(-50%);
|
|
width:110%;
|
|
margin-left:-5%;
|
|
height:1px;
|
|
background:linear-gradient(to right, transparent 0%, transparent 10%, var(--Description-Text-Color) 40%, var(--Description-Text-Color) 90%, transparent);
|
|
transform:rotate(-3deg);
|
|
}
|
|
|
|
/*----- CUSTOM LINKS BAR -----*/
|
|
[navbar]{
|
|
position:absolute;
|
|
bottom:0;
|
|
left:0;margin-left:calc(((100% - var(--Navbar-Width)) / 2) + 5px);
|
|
|
|
width:var(--Navbar-Width);
|
|
border-radius:var(--Navbar-Corner-Roundness);
|
|
overflow:hidden;
|
|
box-shadow:-0.7vw 1vw 1.5vw var(--Navbar-Box-Shadow);
|
|
z-index:4;
|
|
}
|
|
|
|
[navbar]:before {
|
|
content:"";
|
|
position:absolute;
|
|
top:0;left:0;
|
|
width:var(--Navbar-Stripe-1-Width);
|
|
height:100%;
|
|
background:var(--Navbar-Stripe-1-Color);
|
|
}
|
|
|
|
[navbar]:after {
|
|
content:"";
|
|
position:absolute;
|
|
top:0;left:0;
|
|
margin-left:var(--Navbar-Stripe-1-Width);
|
|
width:var(--Navbar-Stripe-2-Width);
|
|
height:100%;
|
|
background:var(--Navbar-Stripe-2-Color);
|
|
border-left:var(--Navbar-Stripe-Spacing) solid var(--Navbar-Background);
|
|
}
|
|
|
|
[lb-bg]{
|
|
margin-left:calc(var(--Navbar-Stripe-1-Width) + var(--Navbar-Stripe-Spacing) + var(--Navbar-Stripe-2-Width));
|
|
height:100%;
|
|
padding:calc(var(--Navbar-Padding) - var(--qugiw)) var(--Navbar-Padding);
|
|
background:var(--Navbar-Background);
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
[bar-title]{
|
|
font-family:var(--Navbar-Title-Font);
|
|
font-size:var(--Navbar-Title-Size);
|
|
letter-spacing:0.02em;
|
|
color:var(--Navbar-Title-Color);
|
|
}
|
|
|
|
[bar-title] + [some-links]{
|
|
margin-left:8px;
|
|
}
|
|
|
|
[some-links]{
|
|
display:flex;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
font-family:var(--Navbar-Links-Font);
|
|
font-size:var(--Navbar-Links-Size);
|
|
text-transform:uppercase;
|
|
letter-spacing:0.03em;
|
|
margin-right:calc(var(--Navbar-Links-Divider-Spacing) / -4);
|
|
}
|
|
|
|
[some-links] a {
|
|
display:block;
|
|
margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
|
|
flex-shrink:0;
|
|
color:var(--Navbar-Links-Color);
|
|
}
|
|
|
|
[some-links] [divider]{
|
|
margin:0 calc(var(--Navbar-Links-Divider-Spacing) / 4);
|
|
font-size:var(--Navbar-Links-Divider-Size);
|
|
color:var(--Navbar-Links-Divider-Color);
|
|
}
|
|
|
|
[some-links][align="right"]{
|
|
justify-content:flex-end;
|
|
text-align:right;
|
|
}
|
|
|
|
[some-links][align="center"]{
|
|
justify-content:center;
|
|
text-align:center;
|
|
}
|
|
|
|
[some-links][align="left"]{
|
|
justify-content:flex-start;
|
|
text-align:left;
|
|
}
|
|
|
|
/* end style */
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- CREDIT || PLEASE DO NOT REMOVE -->
|
|
<a class="crdz" href="//glenthemes.tumblr.com" title="❖ Melodic Wish ❖ by glenthemes"></a>
|
|
|
|
<div maincont>
|
|
<div leftstuff>
|
|
|
|
<!----- TOP LEFT INTRO ----->
|
|
<div intro>
|
|
|
|
<a back-to-blog href="/" title="back to blog" icon-name="chevron-left"></a>
|
|
|
|
<span icon-name="headphones"></span>
|
|
|
|
<span intro-title> Melodic Wish </span>
|
|
<span intro-subtitle> favorite nier tracks </span>
|
|
|
|
<span playlist-buttons>
|
|
<span shuffle-button>shuffle</span>
|
|
<span play-all-button>play all</span>
|
|
</span>
|
|
</div><!--end intro // don't delete-->
|
|
|
|
|
|
<!---------------------------------->
|
|
|
|
|
|
<!----- PLAYLIST / SONGS ----->
|
|
<!--
|
|
HOW TO ADD YOUR OWN MUSIC:
|
|
https://linktr.ee/direct_file_links
|
|
-->
|
|
<div playlist-main>
|
|
|
|
<!---- START A NEW SONG ---->
|
|
<div song-row>
|
|
<span song-name>Alien Manifestation (Instrumental)</span>
|
|
<audio src="https://rhizo.gitlab.io/nier/Alien_Manifestation__Instrumental_.mp3" volume="100%"></audio>
|
|
</div><!--end a song // don't delete-->
|
|
|
|
<!---- START A NEW SONG ---->
|
|
<div song-row>
|
|
<span song-name>Bipolar Nightmare</span>
|
|
<audio src="https://rhizo.gitlab.io/nier/Bipolar_Nightmare.mp3" volume="80%"></audio>
|
|
</div><!--end a song // don't delete-->
|
|
|
|
</div><!--end playlist // don't delete-->
|
|
</div><!--end leftstuff // don't delete-->
|
|
|
|
<!---------------------------------->
|
|
|
|
<div rightstuff>
|
|
<!------ SIDEBAR IMAGE ------>
|
|
<div sidebar-image vinyl="yes">
|
|
<img src="https://66.media.tumblr.com/826ccd0082a8512bc6638d0f560cabd3/tumblr_pquw89YkQ31qg2f5co1_r1_1280.png">
|
|
</div>
|
|
|
|
<!------ SIDEBAR TEXT ------>
|
|
<div artist-name>Keiichi Okabe</div>
|
|
<div album-name>NieR: Automata OST</div>
|
|
|
|
<div divider-line quote-mark="yes"></div>
|
|
|
|
<div description>
|
|
|
|
Here is your description!
|
|
<b>bold</b>,
|
|
<i>italic</i>,
|
|
<a href="https://demo.tumblr.com">sample link</a>
|
|
|
|
</div><!--end description // don't delete-->
|
|
|
|
<!------ NAVBAR ------>
|
|
<div navbar>
|
|
<span bar-title>Please select an item.</span>
|
|
|
|
<div some-links align="right">
|
|
|
|
<a href="/">home</a>
|
|
<a href="/ask">message</a>
|
|
<a href="/archive">archive</a>
|
|
|
|
</div><!--end links-->
|
|
</div><!--end navbar-->
|
|
|
|
</div><!--end rightstuff-->
|
|
</div><!--end maincont-->
|
|
|
|
|
|
<script>feather.replace()</script>
|
|
</body>
|
|
|
|
</html> |