626 lines
11 KiB
CSS
626 lines
11 KiB
CSS
:root{
|
|
--block: lch(90% 25 85);
|
|
--box: lch(100% 0 90);
|
|
--back: radial-gradient(white 50%, lch(95% 10 225) );
|
|
--search-back: white;
|
|
--thick-border: lch(80% 45 85);
|
|
--thin-border: lch(40% 45 85);
|
|
--pressed: lch(65% 40 75);
|
|
--pressed-text: lch(100% 25 85);
|
|
--text: black;
|
|
--light-text: gray;
|
|
--text-shadow: black;
|
|
font-family: "Zen Maru Gothic", sans-serif;
|
|
color: var(--text);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root{
|
|
--block: lch(20% 0 75);
|
|
--box: lch(40% 2.5 75);
|
|
--back: radial-gradient(lch(20% 0 75), black );
|
|
--search-back: lch(35% 0 75);
|
|
--thick-border: lch(60% 10 75);
|
|
--thin-border: lch(60% 10 75);
|
|
--pressed: lch(5% 0 75);
|
|
--pressed-text: lch(95% 5 75);
|
|
--text: lch(95% 5 75);
|
|
--box-text: white;
|
|
--light-text: lch(65% 5 75);
|
|
--light-box-text: lch(85% 5 75);
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6{
|
|
font-family: "Shippori Mincho", serif;
|
|
margin: 0;
|
|
}
|
|
|
|
body{
|
|
display: flex; flex-direction: column;
|
|
margin: 0;
|
|
background: var(--back);
|
|
background-attachment: fixed;
|
|
height: 100vh;
|
|
}
|
|
|
|
a{
|
|
color: var(--text);
|
|
}
|
|
|
|
span{
|
|
color: var(--text);
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
header{
|
|
background: var(--block);
|
|
margin: 0;
|
|
border-style: outset; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thick-border);
|
|
}
|
|
|
|
.top-buttons{
|
|
display: flex; flex: auto; justify-content: center;
|
|
padding: .6rem;
|
|
column-gap: .6rem;
|
|
max-height: fit-content;
|
|
max-width: 64rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.nav-button{
|
|
display: flex; flex-direction: column; justify-content: center;
|
|
background-color: var(--block);
|
|
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
|
|
position: relative;
|
|
flex: auto;
|
|
}
|
|
|
|
.nav-button a{
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-button li{
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-text{
|
|
color: var(--text);
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-text::before{
|
|
content: "-"
|
|
}
|
|
|
|
.nav-text::after{
|
|
content: "-"
|
|
}
|
|
|
|
.nav-button img{
|
|
display: block;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
.nav-button.home{
|
|
flex: none;
|
|
}
|
|
|
|
.nav-button.home::before{
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* HOME BUTTON */
|
|
|
|
.home-main{
|
|
margin-top: clamp(0rem, calc(8vw - 8rem), 2.4rem); margin-bottom: auto;
|
|
background: var(--block);
|
|
}
|
|
|
|
.home-title{
|
|
padding: 4vh;
|
|
text-align: center;
|
|
border-style: outset; border-color: var(--thick-border);
|
|
background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50));
|
|
position: relative;
|
|
}
|
|
|
|
.home-title h1{
|
|
text-shadow: 1px 1px 2px var(--text-shadow);
|
|
color: lch(90% 25 85);
|
|
}
|
|
|
|
.home-title h1::before{
|
|
content: "-"
|
|
}
|
|
|
|
.home-title h1::after{
|
|
content: "-"
|
|
}
|
|
|
|
.home-title h3{
|
|
margin-top: 1.2rem;
|
|
color: lch(90% 25 85);
|
|
}
|
|
|
|
.home-title p{
|
|
position: absolute;
|
|
right: .3rem;
|
|
bottom: .3rem;
|
|
font-size: small;
|
|
margin: 0;
|
|
color: lch(80% 50 50);
|
|
}
|
|
|
|
.home-body{
|
|
|
|
padding-top: 1.2rem;
|
|
}
|
|
|
|
.home-body h2{
|
|
text-align: center;
|
|
}
|
|
|
|
.home-body p{
|
|
margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-nav{
|
|
display: flex; gap: 1.2rem;
|
|
border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
|
|
margin: 1.2rem; margin-bottom: 0;
|
|
padding-bottom: 1.2rem;
|
|
}
|
|
|
|
.home-button{
|
|
display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center;
|
|
flex: auto;
|
|
position: relative;
|
|
border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem;
|
|
text-decoration: none;
|
|
background-color: var(--block);
|
|
padding-top: 1.2rem; padding-bottom: 1.2rem;
|
|
}
|
|
|
|
|
|
/* SEARCH BAR */
|
|
|
|
.search-bar{
|
|
display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center;
|
|
max-width: 64rem;
|
|
width: 100%;
|
|
height: 3.6rem;
|
|
margin-left: auto; margin-right: auto;
|
|
background-color: var(--block);
|
|
border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px;
|
|
}
|
|
|
|
.search-items{
|
|
position: relative;
|
|
height: 2.4rem;
|
|
width: 80%;
|
|
}
|
|
|
|
.search-items input{
|
|
/* all:unset; */
|
|
font: unset;
|
|
color: unset;
|
|
background-color: var(--search-back);
|
|
width: 100%;
|
|
height: 2.4rem;
|
|
border-style: solid; border-color: var(--thin-border); border-width: 1px;
|
|
}
|
|
|
|
/* SEARCH RESULTS */
|
|
|
|
#search-results{
|
|
display: flex; flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
#search-results h2{
|
|
visibility: collapse;
|
|
}
|
|
|
|
#search-results ul{
|
|
background-color: var(--search-back);
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
list-style: none;
|
|
z-index: 1;
|
|
border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0;
|
|
}
|
|
|
|
#search-results li{
|
|
display: flex; align-items: center;
|
|
min-height: 2.4rem;
|
|
border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0;
|
|
}
|
|
|
|
#search-results a{
|
|
text-decoration: none;
|
|
}
|
|
|
|
.search-icon{
|
|
min-width: 2.6rem;
|
|
}
|
|
|
|
.search-icon img{
|
|
margin-left: auto;
|
|
height: 1.8rem;
|
|
display: block;
|
|
}
|
|
|
|
.search-icon.album img{
|
|
display: block;
|
|
height: 1.2rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.search-type{
|
|
font-size: small;
|
|
color: var(--light-box-text);
|
|
margin-left: .3rem;
|
|
min-width: 2.6rem;
|
|
}
|
|
|
|
/* MAIN PAGE */
|
|
|
|
main{
|
|
background-color: var(--block);
|
|
max-width: 64rem;
|
|
width: 100%;
|
|
margin-left: auto; margin-right: auto;
|
|
}
|
|
|
|
main ul{
|
|
display: flex; flex-direction: column;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/* FOOTER */
|
|
|
|
footer{
|
|
background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.footer-content{
|
|
display: flex; justify-content: center; flex-wrap: wrap; align-items: center;
|
|
max-width: 64rem;
|
|
margin-left: auto; margin-right: auto; margin-bottom: .3rem; margin-top: .3rem;
|
|
}
|
|
|
|
.footer-content span{
|
|
font-size: calc(.7rem + .3vw);
|
|
margin-left: 1.2rem; margin-right: 1.2rem;
|
|
text-align: center;
|
|
color: lch(90% 25 85);
|
|
}
|
|
|
|
.footer-content a{
|
|
color: lch(90% 25 85);
|
|
}
|
|
|
|
.copyright{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: .3em;
|
|
justify-content: center;
|
|
margin-left: 1.2rem; margin-right: 1.2rem;
|
|
}
|
|
|
|
.copyright span{
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
/* INDEX LISTS */
|
|
|
|
.album-list{
|
|
display: flex; flex-direction: column;
|
|
}
|
|
|
|
.category-list{
|
|
display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.album-icon{
|
|
display: inline-block;
|
|
align-self: center;
|
|
}
|
|
|
|
/* INDEX BLOCKS */
|
|
|
|
.sort-box{
|
|
margin-top: 1.2rem; margin-left: 1.2rem; margin-right: 1.2rem;
|
|
}
|
|
|
|
.sort-box.album:not(:first-child){
|
|
margin-top: 2.4rem;
|
|
}
|
|
|
|
.sort-box:last-child{
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.sort-box.category{
|
|
width: 29.6rem;
|
|
background: var(--block);
|
|
}
|
|
|
|
.sort-header{
|
|
border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-width: 1px; border-color: var(--thin-border);
|
|
}
|
|
|
|
.sort-header.album{
|
|
display: flex; align-items: center;
|
|
font-size: calc(.7rem + .4vw);
|
|
background: var(--block);
|
|
position: sticky;
|
|
top: 0;
|
|
gap: .6rem;
|
|
}
|
|
|
|
.date{
|
|
margin-top: .6rem; margin-left: 2.4rem;
|
|
font-size: small;
|
|
}
|
|
|
|
/* INDEX ENTRIES */
|
|
|
|
.entry-box{
|
|
display: flex; align-items: center;
|
|
list-style: none;
|
|
min-height: 1.8rem;
|
|
background-color: var(--box);
|
|
border-radius: 1.2rem;
|
|
margin-top: .6rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.entry-box.song{
|
|
margin-bottom: .6rem;
|
|
}
|
|
|
|
.entry-box.song.empty{
|
|
margin-top: 0; margin-bottom: 0; margin-right: 2.4rem;
|
|
background: none;
|
|
}
|
|
|
|
.entry-box li{
|
|
display: flex; flex: auto; flex-wrap: nowrap; align-items: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 1.8rem;
|
|
}
|
|
|
|
.entry-box.motif li{
|
|
justify-content: center;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.entry-box.song li{
|
|
justify-content: left;
|
|
}
|
|
|
|
.entry-box.motif::before{
|
|
content: "";
|
|
max-width: 3.6rem;
|
|
flex-grow: 1;
|
|
visibility: hidden;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.motif-name{
|
|
text-align: center;
|
|
color: var(--box-text);
|
|
|
|
}
|
|
|
|
.track-number{
|
|
min-width: 2.4rem;
|
|
margin-left: .6rem;
|
|
color: var(--box-text);
|
|
}
|
|
|
|
.track-name{
|
|
color: var(--box-text);
|
|
}
|
|
|
|
.track-name-jp{
|
|
margin-left: 2.4rem;
|
|
color: var(--light-box-text);
|
|
}
|
|
|
|
.empty{
|
|
color: var(--light-text);
|
|
}
|
|
|
|
.clip-count{
|
|
color: var(--box-text);
|
|
display: inline;
|
|
text-align: left;
|
|
min-width: 2.4rem;
|
|
margin-left: .24rem;
|
|
}
|
|
|
|
.count-icon{
|
|
width: 1.2rem; height: 1.2rem;
|
|
margin-left: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* SONG INDEX ALBUM DROPDOWNS */
|
|
|
|
.sort-list.album{
|
|
display: none;
|
|
}
|
|
|
|
.sort-header.album > *{
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sort-header.album::after{
|
|
content: "▼";
|
|
margin-left: auto;
|
|
color: var(--thin-border);
|
|
}
|
|
|
|
.sort-header.album.open::after{
|
|
content: "▲";
|
|
}
|
|
|
|
.sort-header.album.open ~ .sort-list.album{
|
|
display:initial
|
|
}
|
|
|
|
|
|
|
|
/* ENTRY PAGE TITLES */
|
|
|
|
.title-box{
|
|
margin: 1.2rem; margin-bottom: 1.2rem;
|
|
background: var(--box);
|
|
}
|
|
|
|
.eng-title{
|
|
display: flex; align-items: center;
|
|
color: var(--box-text);
|
|
}
|
|
|
|
.title-box img{
|
|
margin-left: .6rem;
|
|
}
|
|
|
|
.title-box h1{
|
|
margin-left: .6rem;
|
|
min-width: 0;
|
|
font-size: calc(1.2rem + .6vw);
|
|
}
|
|
|
|
.title-jp{
|
|
color: var(--light-box-text);
|
|
margin-right: 1.2rem; padding-bottom: .6rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.title-album{
|
|
display: flex; align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.title-album img{
|
|
margin: 0;
|
|
display: block;
|
|
margin-right: .6rem;
|
|
}
|
|
|
|
/* ENTRY PAGE DETAILS */
|
|
|
|
.track-info{
|
|
display: flex; flex-wrap: wrap; justify-content: space-around;
|
|
row-gap: 1.2rem;
|
|
}
|
|
|
|
.track-info li{
|
|
list-style: none;
|
|
}
|
|
|
|
.songpage-detail{
|
|
display: flex; flex-direction: column;
|
|
min-width: 18rem;
|
|
margin-left: 1.2rem; margin-right: 1.2rem;
|
|
}
|
|
|
|
.songpage-detail ul{
|
|
gap: .6rem;
|
|
}
|
|
|
|
.songpage-detail h2{
|
|
text-align: center;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.songpage-detail li{
|
|
display: flex; align-items: baseline; gap: .6rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.songpage-credit{
|
|
font-size: small;
|
|
min-width: 4.2rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.songpage-img{
|
|
display: inline-block;
|
|
height: 1.2rem;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.song-location{
|
|
display: flex; flex-direction: column;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
.song-location h2{
|
|
text-align: center;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.entrypage-connections{
|
|
display: flex; flex-direction: column;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
.entrypage-connections h2{
|
|
text-align: center;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.entrypage-clip{
|
|
display: flex; flex-wrap: wrap-reverse;
|
|
margin-bottom: 1.2rem;
|
|
column-gap: 2.4rem; row-gap: .6rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.connection-icon{
|
|
display: inline-block;
|
|
width: 1.2rem; height: 1.2rem;
|
|
}
|
|
|
|
.clip-pointer{
|
|
display: flex; justify-content: center; align-items: center;
|
|
width: 18rem;
|
|
gap: .3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.clip-album-icon{
|
|
height: 1.2rem;
|
|
}
|
|
|
|
.clip-pointer a{
|
|
flex-shrink: 1;
|
|
} |