webplayer

17 files changed, 373 insertions, 0 deletions

diff --git a/themes/silver/about.txt b/themes/silver/about.txt
new file mode 100644
index 0000000..f02e3b8
--- /dev/null
+++ b/themes/silver/about.txt
@@ -0,0 +1,2 @@
+SILVER THEME - FOR WEBDECK PLAYER

+Created by Chris
\ No newline at end of file
diff --git a/themes/silver/fonts/EurostileExtendedBlack.ttf b/themes/silver/fonts/EurostileExtendedBlack.ttf
new file mode 100644
index 0000000..8856fbe
--- /dev/null
+++ b/themes/silver/fonts/EurostileExtendedBlack.ttf
diff --git a/themes/silver/fonts/LED-Dot-Matrix.ttf b/themes/silver/fonts/LED-Dot-Matrix.ttf
new file mode 100644
index 0000000..1be9221
--- /dev/null
+++ b/themes/silver/fonts/LED-Dot-Matrix.ttf
diff --git a/themes/silver/fonts/licenses/slkscr.txt b/themes/silver/fonts/licenses/slkscr.txt
new file mode 100644
index 0000000..a3d852e
--- /dev/null
+++ b/themes/silver/fonts/licenses/slkscr.txt
@@ -0,0 +1,25 @@
+Thank you for downloading Silkscreen, a type family for your Web graphics
+by Jason Kottke (jason@kottke.org).
+
+To install the Silkscreen type family, unzip this file and drag the files
+into the Fonts folder in the Control Panel.
+
+If you encounter any problems in using this font, please email me and I'll
+see if I can try and fix it. Please note that I can't help you with any
+installation issues. Please consult your system's help files for assistance.
+
+This font is free for personal and corporate use and may be redistributed in
+this unmodified form on your Web site. I would ask that you not modify and
+then redistribute this font...although you may modify it for your own
+personal use. If you really like this font and use it often, feel free to
+mail me (e- or snail mail) some small token of your appreciation. A URL
+of your work using Silkscreen would be appreciated as well.
+
+All future bug fixes, updates, and additions to the Silkscreen type family
+will be available on my Web site at the following URL:
+
+http://www.kottke.org/plus/type/silkscreen/index.html
+
+Again, thanks for downloading Silkscreen. Enjoy!
+
+-jason
\ No newline at end of file
diff --git a/themes/silver/fonts/slkscr.ttf b/themes/silver/fonts/slkscr.ttf
new file mode 100644
index 0000000..85a2037
--- /dev/null
+++ b/themes/silver/fonts/slkscr.ttf
diff --git a/themes/silver/images/green-light-off.gif b/themes/silver/images/green-light-off.gif
new file mode 100644
index 0000000..eb106e4
--- /dev/null
+++ b/themes/silver/images/green-light-off.gif
diff --git a/themes/silver/images/green-light-on.gif b/themes/silver/images/green-light-on.gif
new file mode 100644
index 0000000..1001fb9
--- /dev/null
+++ b/themes/silver/images/green-light-on.gif
diff --git a/themes/silver/images/info.png b/themes/silver/images/info.png
new file mode 100644
index 0000000..1b49e2c
--- /dev/null
+++ b/themes/silver/images/info.png
diff --git a/themes/silver/images/mute.png b/themes/silver/images/mute.png
new file mode 100644
index 0000000..7c8466a
--- /dev/null
+++ b/themes/silver/images/mute.png
diff --git a/themes/silver/images/next.png b/themes/silver/images/next.png
new file mode 100644
index 0000000..5367e4d
--- /dev/null
+++ b/themes/silver/images/next.png
diff --git a/themes/silver/images/pause.png b/themes/silver/images/pause.png
new file mode 100644
index 0000000..af51e03
--- /dev/null
+++ b/themes/silver/images/pause.png
diff --git a/themes/silver/images/play.png b/themes/silver/images/play.png
new file mode 100644
index 0000000..958ce5b
--- /dev/null
+++ b/themes/silver/images/play.png
diff --git a/themes/silver/images/prev.png b/themes/silver/images/prev.png
new file mode 100644
index 0000000..bb3ff27
--- /dev/null
+++ b/themes/silver/images/prev.png
diff --git a/themes/silver/images/sound.png b/themes/silver/images/sound.png
new file mode 100644
index 0000000..7271d16
--- /dev/null
+++ b/themes/silver/images/sound.png
diff --git a/themes/silver/images/stop.png b/themes/silver/images/stop.png
new file mode 100644
index 0000000..365fedd
--- /dev/null
+++ b/themes/silver/images/stop.png
diff --git a/themes/silver/logo.png b/themes/silver/logo.png
new file mode 100644
index 0000000..730c4e5
--- /dev/null
+++ b/themes/silver/logo.png
diff --git a/themes/silver/webdeck-player.css b/themes/silver/webdeck-player.css
new file mode 100644
index 0000000..fe67fdc
--- /dev/null
+++ b/themes/silver/webdeck-player.css
@@ -0,0 +1,346 @@
+/* Font import */

+@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);}

+@font-face {font-family: LED Dot-Matrix; src: url(./fonts/LED-Dot-Matrix.ttf);}

+@font-face {

+    font-family: Eurostile;

+    src: url(./fonts/EurostileExtendedBlack.ttf);

+    font-weight: 900;

+}

+

+

+*{

+    margin: 0;

+    padding: 0;

+}

+

+html, body {

+    height: 100%;

+}

+

+body{

+    display: flex;

+    justify-content: center;

+    align-items: center;

+    font-family: Silkscreen, monospace;

+    color: white;

+    background: linear-gradient(180deg, rgb(239, 241, 244) 0%, rgb(234, 236, 239) 20%, rgba(189,194,200,1) 95%, rgb(219, 222, 227) 100%);

+}

+

+select{

+    margin-right: 1px;

+}

+

+button{

+    padding: 2px;

+    margin-right: 1px;

+    font-family: Silkscreen, monospace;

+

+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+    border-radius: 5px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+}

+

+button:active{

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+    border-radius: 5px;

+    box-shadow: none;

+}

+

+.toggle-button[state='off'] > p::before{

+    content: url(./images/green-light-off.gif);

+    margin-right: 3px;

+}

+

+.toggle-button[state='on'] > p::before{

+    content: url(./images/green-light-on.gif);

+    margin-right: 3px;

+}

+

+

+select{

+    font-family: Silkscreen, monospace;

+

+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+    border-radius: 5px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+}

+

+select:active{

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+    border-radius: 5px;

+    box-shadow: none;

+}

+

+

+

+

+/* Blink class */

+.blink {

+    animation: blinker 2s step-start infinite;

+}

+

+@keyframes blinker {

+    50% {

+        opacity: 0;

+    }

+}

+

+

+/* Columns section */

+.columns{

+    display: flex;

+}

+

+.columns > div:first-child{

+    flex-shrink: 0;

+    margin-right: 5px;

+}

+

+.columns > div:last-child{

+    flex-grow: 1;

+}

+

+

+

+/* -- Sliders -- */

+input[type="range"] {

+    appearance: none;

+    background: none;

+    border: solid 1px darkgray;

+    border-radius: 10px;

+

+    height: 5px;

+    margin-top: 7px;

+    margin-bottom: 7px;

+}

+

+/* slider track */

+input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ {

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%);

+    height: 100%;

+    border-radius: 10px;

+}

+

+input[type="range"]::-moz-range-track /* For Firefox */ {

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%);

+    height: 100%;

+    border-radius: 10px;

+}

+

+/* slider thumb */

+input[type="range"]::-webkit-slider-thumb /* For Chrome */ {

+    appearance: none;

+    position: relative;

+    top: -4px;

+

+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+

+    border-radius: 10px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+

+    height: 0.8rem;

+    width: 1.8rem;

+}

+

+input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ {

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+

+    border-radius: 10px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+}

+

+

+

+input[type="range"]::-moz-range-thumb /* For Firefox */ {

+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+

+    border-radius: 10px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+

+    height: 0.7rem;

+    width: 1.8rem;

+}

+

+input[type="range"]::-moz-range-thumb:active /* For Firefox */ {

+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%);

+    border: groove 2px white;

+

+    border-radius: 10px;

+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);

+}

+

+

+

+/* ---- Web Deck Player ---- */

+#web-deck-player{

+    padding: 0 5px;

+}

+

+

+/* Player title bar */

+#player-title-bar{

+    display: flex;

+    color: gray;

+    font-family: Eurostile, Arial, Helvetica, sans-serif;

+    font-weight: bold;

+    font-size: 10pt;

+    padding: 2px 0;

+}

+

+#player-title-bar:before,

+#player-title-bar:after{

+    content: "";

+    flex: 1;

+    margin: auto 1em;

+    height: 2px;

+    border-top: ridge silver 2px;

+    border-bottom: ridge silver 2px;

+}

+

+/* Player body */

+#player-body{

+    margin: 2px;

+    padding: 5px;

+    border: groove 2px silver;

+    border-radius: 5px;

+}

+

+/* Player main section */

+#player-main-section{

+    margin-bottom: 5px;

+}

+

+

+/* Player display */

+#player-display{

+    width: 250px;

+    height: 140px;

+    background: black;

+    border: solid 1px dimgray;

+    border-radius: 5px;

+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);

+}

+

+

+/* Player info */

+#info-screen{

+    background: radial-gradient(circle, rgb(89, 187, 248) 0%, rgb(56, 136, 248) 70%);

+    color: #0a3765;

+    border: solid 1px dimgray;

+    border-radius: 5px;

+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);

+    margin-bottom: 5px;

+    padding: 2px;

+    font-family: "LED Dot-Matrix", monospace;

+    font-size: medium;

+}

+

+#songLabel{

+    background: #0a3765;

+    border-radius: 3px;

+    color: #3888f8;

+}

+

+#statusLabel{

+    margin: 2px 0;

+    border-top: 1.5px dotted #0a3765;

+    line-height: 0.9em;

+}

+

+.player-row{

+    margin-top: 5px;

+    display: flex;

+    flex-wrap: nowrap;

+    justify-content: space-between;

+}

+

+#volumeButton{

+    height: 25px;

+    width: 25px;

+}

+

+#volumeButton img{

+    height: 100%;

+}

+

+#volumeBar{

+    width: 120px;

+}

+

+#themeSelector{

+    height: 25px;

+    max-width: 150px;

+    text-overflow: ellipsis;

+}

+

+#videoButton{

+    height: 25px;

+}

+

+#playerLogo{

+    text-align: center;

+    height: fit-content;

+}

+

+#playerLogo > img{

+    margin-top: 5px;

+    max-height: 50px;

+}

+

+/* Player control panel */

+#player-control-panel{

+    font-size: 0;

+}

+

+#seekBar{

+    width: 99%;

+    margin-bottom: 12px;

+}

+

+.playing-controls{

+    margin-bottom: 5px;

+    margin-right: 5px;

+    display: inline-block;

+    width: fit-content;

+    background: none;

+    border-radius: 20px;

+    vertical-align: middle;

+}

+

+.playing-controls[rounded]{

+    border-radius: 20px;

+}

+

+.playing-controls[float-right]{

+    float: right;

+}

+

+.playing-controls button{

+    height: 30px;

+    min-width: 50px;

+}

+

+.playing-controls button img{

+    height: 100%;

+}

+

+

+#infoButton{

+    border-radius: 20px;

+    height: 30px;

+    min-width: 30px;

+    font-size: large;

+}

+

+#playlistSelector{

+    height: 30px;

+    max-width: 175px;

+    text-overflow: ellipsis;

+}