mirror of https://github.com/kurisufriend/0x40-web
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
497 lines
9.2 KiB
497 lines
9.2 KiB
/* Heavily based on Kepstin's wonderful CSS work
|
|
https://github.com/kepstin/0x40hues-html5/blob/master/hues-m.css */
|
|
|
|
.ModernUI {
|
|
font-family: 'PetMe64Web';
|
|
}
|
|
|
|
.hues-m-beatbar, .hues-m-beatcenter{
|
|
transform: translateY(0px);
|
|
-webkit-transform: translateY(0px);
|
|
transition: transform 1s ease-out;
|
|
-webkit-transition: -webkit-transform 1s ease-out;
|
|
}
|
|
|
|
.hues-m-controls {
|
|
transform: translateY(0px);
|
|
-webkit-transform: translateY(0px);
|
|
transition: transform 1s ease-out;
|
|
-webkit-transition: -webkit-transform 1s ease-out;
|
|
}
|
|
|
|
.hues-m-beatbar.hidden, .hues-m-beatcenter.hidden{
|
|
transform: translateY(-40px);
|
|
-webkit-transform: translateY(-40px);
|
|
}
|
|
|
|
.hues-m-controls.hidden {
|
|
transform: translateY(104px);
|
|
-webkit-transform: translateY(104px);
|
|
}
|
|
|
|
.hues-m-beatbar {
|
|
position: absolute;
|
|
top: 0;
|
|
max-width: 992px;
|
|
height: 30px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
left: 8px;
|
|
right: 8px;
|
|
color: white;
|
|
background: rgba(127,127,127,0.5);
|
|
border-color: rgba(0,0,0,0.5);
|
|
border-width: 0 4px 4px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.hues-m-beatleft, .hues-m-beatright, .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
|
|
color: white;
|
|
background: rgba(0,0,0,0.7);
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.hues-m-leftinfo, .hues-m-rightinfo {
|
|
position: absolute;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
color: rgba(255,255,255, 0.7);
|
|
bottom: 29px;
|
|
width: 100px;
|
|
}
|
|
|
|
.hues-m-leftinfo {
|
|
left: 8px;
|
|
}
|
|
|
|
.hues-m-rightinfo {
|
|
right: 8px;
|
|
}
|
|
|
|
.hues-m-huename {
|
|
font-size: 8px;
|
|
height: 12px;
|
|
line-height: 12px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.hues-m-beatleft, .hues-m-beatright {
|
|
position: absolute;
|
|
padding: 0 0 0 20px;
|
|
top: 5px;
|
|
overflow: hidden;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
.hues-m-beatleft {
|
|
transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
left: 8px;
|
|
right: 50%;
|
|
}
|
|
.hues-m-beatright {
|
|
left: 50%;
|
|
right: 8px;
|
|
}
|
|
|
|
.hues-m-beatcenter {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
height: 40px;
|
|
width: 40px;
|
|
color: white;
|
|
background: rgb(80,80,80);
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.hues-m-beatcenter > span {
|
|
-moz-animation-duration: 150ms;
|
|
-webkit-animation-duration: 150ms;
|
|
animation-duration: 150ms;
|
|
-moz-animation-name: hues-m-beatcenter;
|
|
-webkit-animation-name: hues-m-beatcenter;
|
|
animation-name: hues-m-beatcenter;
|
|
-moz-animation-fill-mode: forwards;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@-moz-keyframes hues-m-beatcenter {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes hues-m-beatcenter {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes hues-m-beatcenter {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hues-m-controls {
|
|
position: absolute;
|
|
bottom: 0;
|
|
max-width: 992px;
|
|
height: 104px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
left: 8px;
|
|
right: 8px;
|
|
color: rgba(255,255,255,0.7);
|
|
background: rgba(127,127,127,0.5);
|
|
border-color: rgba(0,0,0,0.5);
|
|
border-width: 4px 4px 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
.hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
|
|
position: absolute;
|
|
text-align: center;
|
|
padding: 0 4px;
|
|
left: 8px;
|
|
right: 8px;
|
|
}
|
|
.hues-m-songtitle {
|
|
bottom: 5px;
|
|
}
|
|
.hues-m-imagename {
|
|
bottom: 29px;
|
|
left: 108px;
|
|
right: 108px;
|
|
}
|
|
|
|
.hues-m-songtitle > a:link, .hues-m-songtitle > a:visited, .hues-m-imagename > a:link, .hues-m-imagename > a:visited {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
}
|
|
.hues-m-songtitle > a.small, .hues-m-imagename > a.small {
|
|
font-size: 10px;
|
|
}
|
|
.hues-m-songtitle > a.x-small, .hues-m-imagename > a.x-small {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.hues-m-leftbox {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
left: 0;
|
|
right: 50%;
|
|
height: 54px;
|
|
}
|
|
|
|
.hues-m-rightbox {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
left: 50%;
|
|
right: 0;
|
|
height: 54px;
|
|
}
|
|
|
|
.hues-m-controlblock {
|
|
/* Don't want double click to select */
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-size: 12px;
|
|
width: 50%;
|
|
margin: 3px auto;
|
|
float: left;
|
|
}
|
|
|
|
.hues-m-controlbuttons {
|
|
margin: auto;
|
|
position: relative;
|
|
width: 70px;
|
|
}
|
|
|
|
.hues-m-songbutton {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.hues-m-prevbutton, .hues-m-nextbutton, .hues-m-actbutton {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hues-m-prevbutton:hover, .hues-m-nextbutton:hover, .hues-m-actbutton:hover {
|
|
background: rgb(100,100,100);
|
|
}
|
|
|
|
.hues-m-prevbutton, .hues-m-nextbutton {
|
|
color: white;
|
|
background: rgb(40,40,40);
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
border-radius: 10px;
|
|
top: 7.5px;
|
|
}
|
|
|
|
.hues-m-prevbutton {
|
|
padding: 0 10px 0 0;
|
|
left: 5px;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
|
|
.hues-m-nextbutton {
|
|
padding: 0 0 0 10px;
|
|
left: 42px;
|
|
border-radius: 0 10px 10px 0;
|
|
}
|
|
|
|
.hues-m-actbutton {
|
|
height: 35px;
|
|
width: 35px;
|
|
left: 17.5px;
|
|
color: white;
|
|
background: rgb(32,32,32);
|
|
font-size: 20px;
|
|
line-height: 35px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hues-m-huename {
|
|
bottom: 5px;
|
|
}
|
|
|
|
.hues-m-question, .hues-m-cog, .hues-m-hide {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hues-m-cog {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.hues-m-hide {
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 20px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hues-m-hiderestore {
|
|
display: none;
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
bottom: 0px;
|
|
margin: 0 auto;
|
|
height: 30px;
|
|
max-width: 992px;
|
|
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
|
|
border-top-left-radius: 100px;
|
|
border-top-right-radius: 100px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hues-m-hiderestore:hover {
|
|
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
|
|
}
|
|
|
|
.hues-m-hiderestore.hidden {
|
|
display: block;
|
|
}
|
|
|
|
.hues-m-question {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 8px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.hues-m-vol-bar {
|
|
position: absolute;
|
|
height: 20px;
|
|
bottom: 21px;
|
|
left: 40px;
|
|
right: 40px;
|
|
}
|
|
|
|
.hues-m-vol-label {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 14px;
|
|
right: 0;
|
|
height: 12px;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
text-align: center;
|
|
padding: 0;
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.hues-m-vol-bar > input {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
}
|
|
|
|
.hues-m-listcontainer {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 110px;
|
|
}
|
|
|
|
/* Fun slider stuff! */
|
|
|
|
input[type=range] {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 12px;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.7);
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
box-shadow: none;
|
|
border: none;
|
|
height: 12px;
|
|
width: 4px;
|
|
border-radius: 0;
|
|
background: rgb(255,255,255);
|
|
margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
|
|
}
|
|
|
|
input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.7);
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
input[type=range]::-moz-range-thumb {
|
|
box-shadow: none;
|
|
border: none;
|
|
height: 12px;
|
|
width: 4px;
|
|
border-radius: 0;
|
|
background: rgb(255,255,255);
|
|
}
|
|
|
|
input[type=range]::-ms-track {
|
|
width: 100%;
|
|
background: transparent; /* Hides the slider so custom styles can be added */
|
|
border-color: transparent;
|
|
color: transparent;
|
|
height: 4px;
|
|
border-width: 4px 0;
|
|
}
|
|
|
|
input[type=range]::-ms-fill-lower {
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
input[type=range]::-ms-fill-upper {
|
|
background: rgba(0,0,0,0.7);
|
|
}
|
|
|
|
input[type=range]::-ms-thumb {
|
|
box-shadow: none;
|
|
border: none;
|
|
height: 12px;
|
|
width: 4px;
|
|
border-radius: 0;
|
|
background: rgb(255,255,255);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.hues-m-controls {
|
|
height: 54px;
|
|
}
|
|
.hues-m-imagename {
|
|
left: 300px;
|
|
right: 300px;
|
|
}
|
|
.hues-m-songtitle {
|
|
left: 192px;
|
|
right: 192px;
|
|
}
|
|
.hues-m-leftinfo {
|
|
left: 200px;
|
|
}
|
|
.hues-m-rightinfo {
|
|
right: 200px;
|
|
}
|
|
.hues-m-leftbox {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: auto;
|
|
width: 192px;
|
|
height: 54px;
|
|
}
|
|
.hues-m-rightbox {
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
width: 192px;
|
|
height: 54px;
|
|
}
|
|
.hues-m-listcontainer {
|
|
bottom: 60px;
|
|
max-width: 992px;
|
|
margin: 0 auto;
|
|
left: 8px;
|
|
}
|
|
}
|
|
|