596 lines
13 KiB
HTML
596 lines
13 KiB
HTML
<style>
|
|
:host {
|
|
--media-range-background: transparent;
|
|
|
|
--media-range-track-height: 1px;
|
|
--media-range-track-background: transparent;
|
|
|
|
--media-preview-time-background: transparent;
|
|
--media-preview-time-margin: 0;
|
|
--media-preview-time-padding: 0;
|
|
--media-tooltip-display: none;
|
|
|
|
--_c-buttons-image: url('<%= await base64("./assets/CBUTTONS.png") %>');
|
|
--_monoster-image: url('<%= await base64("./assets/MONOSTER.png") %>');
|
|
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
media-time-range,
|
|
media-time-range:active,
|
|
media-time-range:hover {
|
|
--media-range-thumb-width: 28px;
|
|
--media-range-thumb-height: 10px;
|
|
--media-range-thumb-border-radius: 0;
|
|
--media-range-thumb-background: 58px 0 url('<%= await base64("./assets/POSBAR.png") %>');
|
|
}
|
|
|
|
media-volume-range,
|
|
media-volume-range:active,
|
|
media-volume-range:hover {
|
|
--media-range-thumb-width: 14px;
|
|
--media-range-thumb-height: 10px;
|
|
--media-range-thumb-border-radius: 0;
|
|
--media-range-thumb-background: 53px 443px url('<%= await base64("./assets/BALANCE.png") %>');
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
width: 275px;
|
|
height: 116px;
|
|
background: url('<%= await base64("./assets/MAIN.png") %>');
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: 88px;
|
|
left: 16px;
|
|
display: flex;
|
|
}
|
|
|
|
media-seek-backward-button {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
width: 23px;
|
|
height: 18px;
|
|
}
|
|
|
|
media-seek-backward-button div[slot='icon'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 136px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-seek-backward-button:active div[slot='icon'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 136px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
width: 23px;
|
|
height: 18px;
|
|
}
|
|
|
|
media-play-button.play div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 114px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.play div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 114px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.play:active div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 114px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.play:active div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 114px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.pause div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 91px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.pause div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 91px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.pause:active div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 91px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.pause:active div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 91px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.stop div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 68px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.stop div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 68px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.stop:active div[slot='play'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 68px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-play-button.stop:active div[slot='pause'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 68px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-seek-forward-button {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
width: 23px;
|
|
height: 18px;
|
|
}
|
|
|
|
media-seek-forward-button div[slot='icon'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 45px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-seek-forward-button:active div[slot='icon'] {
|
|
width: 23px;
|
|
height: 18px;
|
|
background: 45px 18px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-fullscreen-button {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin-top: 1px;
|
|
margin-left: 6px;
|
|
width: 22px;
|
|
height: 16px;
|
|
}
|
|
|
|
media-fullscreen-button div[slot='enter'] {
|
|
width: 23px;
|
|
height: 16px;
|
|
background: 22px 0 var(--_c-buttons-image);
|
|
}
|
|
|
|
media-fullscreen-button:active div[slot='enter'] {
|
|
width: 23px;
|
|
height: 16px;
|
|
background: 22px 20px var(--_c-buttons-image);
|
|
}
|
|
|
|
media-time-display {
|
|
position: absolute;
|
|
background: black;
|
|
line-height: 20px;
|
|
top: 23px;
|
|
left: 61px;
|
|
padding: 0;
|
|
color: #00e201;
|
|
letter-spacing: -0.04rem;
|
|
font-family: 'winamp-numbers', monaco;
|
|
font-size: 83%;
|
|
font-smooth: never;
|
|
-webkit-font-smoothing: none;
|
|
}
|
|
|
|
media-time-range {
|
|
--media-range-bar-color: transparent;
|
|
--media-time-range-buffered-color: transparent;
|
|
position: absolute;
|
|
top: 71px;
|
|
left: 17px;
|
|
background: transparent;
|
|
height: 12px;
|
|
width: 248px;
|
|
padding: 0;
|
|
}
|
|
|
|
media-volume-range {
|
|
--media-range-bar-color: transparent;
|
|
position: absolute;
|
|
top: 58px;
|
|
left: 108px;
|
|
background: 0 -2px url('<%= await base64("./assets/VOLUME.png") %>');
|
|
height: 10px;
|
|
width: 68px;
|
|
padding: 0;
|
|
}
|
|
|
|
.balance {
|
|
position: absolute;
|
|
top: 58px;
|
|
left: 177px;
|
|
background: -9px -2px url('<%= await base64("./assets/BALANCE.png") %>');
|
|
height: 10px;
|
|
width: 37px;
|
|
padding: 0;
|
|
}
|
|
|
|
.monoster {
|
|
position: absolute;
|
|
left: 215px;
|
|
top: 40px;
|
|
width: 50px;
|
|
height: 15px;
|
|
display: flex;
|
|
}
|
|
|
|
.monoster :first-child {
|
|
width: 24px;
|
|
height: 13px;
|
|
background: 24px 13px var(--_monoster-image);
|
|
}
|
|
|
|
.monoster :last-child {
|
|
width: 26px;
|
|
height: 13px;
|
|
background: 0px 25px var(--_monoster-image);
|
|
}
|
|
|
|
marquee {
|
|
position: absolute;
|
|
left: 111px;
|
|
top: 27px;
|
|
width: 153px;
|
|
letter-spacing: 0.02rem;
|
|
font-family: winamp, monaco;
|
|
font-size: 6px;
|
|
line-height: 1;
|
|
color: #00e201;
|
|
font-smooth: never;
|
|
-webkit-font-smoothing: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.kbps {
|
|
position: absolute;
|
|
left: 111px;
|
|
top: 43px;
|
|
width: 153px;
|
|
letter-spacing: 0.02rem;
|
|
font-family: winamp, monaco;
|
|
font-size: 6px;
|
|
line-height: 1;
|
|
color: #00e201;
|
|
font-smooth: never;
|
|
-webkit-font-smoothing: none;
|
|
}
|
|
|
|
.khz {
|
|
position: absolute;
|
|
left: 156px;
|
|
top: 43px;
|
|
width: 153px;
|
|
letter-spacing: 0.02rem;
|
|
font-family: winamp, monaco;
|
|
font-size: 6px;
|
|
line-height: 1;
|
|
color: #00e201;
|
|
font-smooth: never;
|
|
-webkit-font-smoothing: none;
|
|
}
|
|
|
|
media-play-button.play-pause-indicator {
|
|
display: block;
|
|
overflow: hidden;
|
|
background: none;
|
|
position: absolute;
|
|
top: 28px;
|
|
left: 24px;
|
|
padding: 0;
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
media-play-button.play-pause-indicator div[slot='play'] {
|
|
width: 9px;
|
|
height: 9px;
|
|
background: 0 0 url('<%= await base64("./assets/STOP.png") %>');
|
|
}
|
|
|
|
media-play-button.play-pause-indicator div[slot='pause'] {
|
|
width: 9px;
|
|
height: 9px;
|
|
background: 0 0 url('<%= await base64("./assets/PLAY.png") %>');
|
|
}
|
|
|
|
media-play-button.vu-meter {
|
|
display: block;
|
|
overflow: hidden;
|
|
background: none;
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 20px;
|
|
padding: 0;
|
|
width: 88px;
|
|
height: 22px;
|
|
}
|
|
|
|
media-play-button.vu-meter div[slot='play'] {
|
|
width: 88px;
|
|
height: 22px;
|
|
background: none;
|
|
}
|
|
|
|
media-play-button.vu-meter div[slot='pause'] {
|
|
width: 88px;
|
|
height: 22px;
|
|
background: 0 0 url('<%= await base64("./assets/VU.gif") %>');
|
|
}
|
|
|
|
.display {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 22px;
|
|
}
|
|
|
|
.eq {
|
|
position: absolute;
|
|
left: 220px;
|
|
top: 57px;
|
|
width: 22px;
|
|
height: 12px;
|
|
background: 0 0 url('<%= await base64("./assets/EQ.png") %>');
|
|
}
|
|
|
|
.pl {
|
|
position: absolute;
|
|
left: 243px;
|
|
top: 57px;
|
|
width: 22px;
|
|
height: 12px;
|
|
background: 0 0 url('<%= await base64("./assets/PL.png") %>');
|
|
}
|
|
|
|
.loop {
|
|
position: absolute;
|
|
left: 211px;
|
|
top: 89px;
|
|
width: 28px;
|
|
height: 14px;
|
|
background: 0 0 url('<%= await base64("./assets/LOOP.png") %>');
|
|
}
|
|
|
|
media-captions-button {
|
|
position: absolute;
|
|
left: 165px;
|
|
top: 89px;
|
|
width: 46px;
|
|
height: 14px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
media-captions-button div[slot='on'] {
|
|
width: 46px;
|
|
height: 14px;
|
|
background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
|
|
}
|
|
|
|
media-captions-button div[slot='off'] {
|
|
width: 46px;
|
|
height: 14px;
|
|
background: 0 0 url('<%= await base64("./assets/SHUFFLE.png") %>') no-repeat;
|
|
}
|
|
|
|
.container {
|
|
width: 275px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-flow: column-reverse wrap;
|
|
}
|
|
|
|
.window {
|
|
width: 275px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.window .top,
|
|
.window .bottom {
|
|
width: 100%;
|
|
height: 20px;
|
|
flex: none;
|
|
display: flex;
|
|
flex: none;
|
|
}
|
|
|
|
.window .top :nth-child(1) {
|
|
width: 25px;
|
|
height: 20px;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWTL.png") %>');
|
|
}
|
|
|
|
.window .top :nth-child(2) {
|
|
height: 20px;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
background-image: url('<%= await base64("./assets/WINDOWT.png") %>');
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.window .top :nth-child(3) {
|
|
width: 25px;
|
|
height: 20px;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWTR.png") %>');
|
|
}
|
|
|
|
.window .bottom :nth-child(1) {
|
|
width: 125px;
|
|
height: 14px;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWBL.png") %>');
|
|
}
|
|
|
|
.window .bottom :nth-child(2) {
|
|
height: 14px;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
background-image: url('<%= await base64("./assets/WINDOWB.png") %>');
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.window .bottom :nth-child(3) {
|
|
width: 125px;
|
|
height: 14px;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWBR.png") %>');
|
|
}
|
|
|
|
.window .center {
|
|
width: 100%;
|
|
height: 108px;
|
|
display: flex;
|
|
}
|
|
|
|
.window .center .center-left {
|
|
width: 11px;
|
|
height: 100%;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWL.png") %>');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.window .center .center-middle {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.window .center .center-middle media-controller {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
|
|
.window .center .center-right {
|
|
width: 8px;
|
|
height: 100%;
|
|
flex: none;
|
|
background-image: url('<%= await base64("./assets/WINDOWR.png") %>');
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="window">
|
|
<div class="top">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="center-left"></div>
|
|
<div class="center-middle">
|
|
<div style="width: 100%; height: 100%; background: green">
|
|
<media-controller id="controller">
|
|
<slot name="media" slot="media"></slot>
|
|
<slot name="poster" slot="poster"></slot>
|
|
</media-controller>
|
|
</div>
|
|
</div>
|
|
<div class="center-right"></div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<div class="controls">
|
|
<media-seek-backward-button mediacontroller="controller">
|
|
<div slot="icon"></div>
|
|
</media-seek-backward-button>
|
|
<media-play-button class="play" mediacontroller="controller">
|
|
<div slot="play"></div>
|
|
<div slot="pause"></div>
|
|
</media-play-button>
|
|
<media-play-button class="pause" mediacontroller="controller">
|
|
<div slot="play"></div>
|
|
<div slot="pause"></div>
|
|
</media-play-button>
|
|
<media-play-button class="stop" mediacontroller="controller">
|
|
<div slot="play"></div>
|
|
<div slot="pause"></div>
|
|
</media-play-button>
|
|
<media-seek-forward-button mediacontroller="controller">
|
|
<div slot="icon"></div>
|
|
</media-seek-forward-button>
|
|
<media-fullscreen-button mediacontroller="controller">
|
|
<div slot="enter"></div>
|
|
</media-fullscreen-button>
|
|
</div>
|
|
<media-time-display mediacontroller="controller"></media-time-display>
|
|
<media-time-range mediacontroller="controller">
|
|
<div slot="preview"></div>
|
|
</media-time-range>
|
|
<media-volume-range mediacontroller="controller"></media-volume-range>
|
|
<img class="header" src="<%= await base64('./assets/HEADER.png') %>" />
|
|
<img class="display" src="<%= await base64('./assets/DISPLAY.png') %>" />
|
|
<div class="eq"></div>
|
|
<div class="pl"></div>
|
|
<div class="loop"></div>
|
|
<media-captions-button mediacontroller="controller">
|
|
<div slot="on"></div>
|
|
<div slot="off"></div>
|
|
</media-captions-button>
|
|
<div class="balance"></div>
|
|
<div class="monoster">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<marquee scrolldelay="200">Media Chrome, it really whips the llama's ass!</marquee>
|
|
<div class="kbps">192</div>
|
|
<div class="khz">44</div>
|
|
<media-play-button mediacontroller="controller" class="play-pause-indicator">
|
|
<div slot="play"></div>
|
|
<div slot="pause"></div>
|
|
</media-play-button>
|
|
<media-play-button mediacontroller="controller" class="vu-meter">
|
|
<div slot="play"></div>
|
|
<div slot="pause"></div>
|
|
</media-play-button>
|
|
</div>
|
|
</div>
|