@charset "utf-8";
/* このデザインテンプレート専用 ... */
.player_logo {
text-align: center;
margin: 0 0 3.5em 0;
}
.player_logo img {
width: 50%;
max-width: 240px !important;
height: auto;
}
ul {
margin-top: 50px;
margin-bottom: 50px;
}
#container {
background-color: #eee;
text-align: center;
}
/* JavaScript で追加される要素には Shadow DOM があるので、その中のスタイル定義は JavaScript 内で行うこと */
/*#container canvas {
vertical-align: middle;
}*/
#volume_range,
.control_set button {
display: inline-block;
vertical-align: middle;
border-radius: 2px;
}
#volume_range {
appearance: none;
background-color: #ddd;
margin: 0;
height: 16px;
width: 140px;
}
#volume_range::-webkit-slider-thumb {
appearance: none;
width: 16px;
height: 16px;
border-radius: 2px;
vertical-align: middle;
border: 0;
background-color: #aaa;
cursor: pointer;
}
#volume_range:hover {
background-color: #ccc;
}
#volume_range:hover::-webkit-slider-thumb {
background-color: #999;
}
.control_set {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 10px;
}
.control_set button {
cursor: pointer;
background-color: #666;
border: inherit;
width: 48px;
height: 36px;
background-position: center;
background-size: 28px 28px;
background-repeat: no-repeat;
color: transparent;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.control_set button:hover {
background-color: #444;
}
.control_set button:active {
margin-top: 0;
}
button.playback {
background-image: url('data:image/svg+xml;utf8,');
}
button.pause {
background-image: url('data:image/svg+xml;utf8,');
}
button.stop {
background-image: url('data:image/svg+xml;utf8,');
}
button.fullscreen {
background-image: url('data:image/svg+xml;utf8,');
}
button.exitfullscreen {
background-image: url('data:image/svg+xml;utf8,');
}
button.volume {
background-image: url('data:image/svg+xml;utf8,');
}
button.mute {
background-image: url('data:image/svg+xml;utf8,');
}
#dad {
background-color: #eee;
text-align: center;
padding: 100px 0;
border: solid 1px #ddd;
border-radius: 5px;
font-size: 90%;
color: #555;
margin-top: 50px;
margin-bottom: 50px;
}