yellowberry_MercuryPlayer/main.css

html {
    background: black;
	color: white;
    font-family: Meiryo, Helvetica, Arial, sans-serif;
	user-select: none;
}
select, option {
    -moz-font: -moz-pull-down-menu;
    font-family: Meiryo, Helvetica, Arial, sans-serif;
}

.responsive-square {
	width: 100vmin;
	height: 100vmin;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
canvas {
    height: 100%;
    width: 100%;
}
video {
    position: fixed;
    mask-size: 100%;
    mask-image: url('data:image/svg+xml,%3Csvg height%3D"2" width%3D"2" version%3D"1.1" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%3E%3Cellipse style%3D"fill%3A%23000" cx%3D"1" cy%3D"1" rx%3D"1" ry%3D"1"%2F%3E%3C%2Fsvg%3E');
}

#ui {
	position: fixed;
	left: 5px;
	bottom: 5px;
}
input {
    padding-top: 0.5px;
    padding-bottom: 0.5px;
}
.hide-control #ui div:not(.no-hide) {
    display: none !important; /* lol */
}
.long-audio audio {
    width: 1000px;
}
#music_select_div {
    display: none;
}
.remote.officials #music_select_div{
    display: initial;
}
.remote.officials #music_file_div{
    display: none;
}

/* only show relevant UI for local/remote mode */

.show-remote {
    display: none;
}
.hide-remote {
    display: initial;
}
.remote .show-remote {
    display: initial;
}
.remote .hide-remote {
    display: none;
}

.bgm, .bgm * {
    opacity: 1 !important;
}
.bgm {
    display: flex;
    height: 40px;
    line-height: 40px;
    background: rgba(30, 30, 30, 0.7);
    width: 500px;
	max-width: calc(100vw - 10px);
    text-align: center;
}
.bgm svg {
    fill: currentColor;
}
.bgm *:hover > svg {
    fill: #48a0f7;
}
.bgm *:hover:active > svg {
    fill: #2d89e6;
}
.bgm > * {
    flex: none;
}
.bgm .btn {
    width: 40px;
    padding: 3px 0;
}
.bgm .progress {
    flex: 1;
}
.bgm .progress input[type="range"] {
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.bgm .duration {
    width: 80px;
    font-family: Arial;
    font-size: 14px;
}
.bgm .duration .duration-grey {
    color: gray;
}
.bgm .volume {
    width: 30px;
    padding: 3px 0;
}
.bgm .volume_slider {
    width: 50px;
    padding: 0 15px 0 5px;
}
.bgm .volume_slider input[type="range"] {
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.long-audio .bgm {
    width: 1000px;
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0);
    }
    20%, 60% {
        transform: rotate(-25deg);
    }
    40%, 80% {
        transform: rotate(10deg);
    }
}
@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation: none;
    }
    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
}
.github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
    z-index: 10;
}

#stats {
	position: fixed;
	top: 5px;
	left: 5px;
	color: #444;
}

@media screen and (max-width: 500px) {
	.no-mobile {
		display: none;
	}

	.bgm {
		width: 100vw;
	}
}