17 files changed, 418 insertions, 0 deletions
diff --git a/themes/violet/about.txt b/themes/violet/about.txt
new file mode 100644
index 0000000..89e5e66
--- /dev/null
+++ b/themes/violet/about.txt
@@ -0,0 +1,2 @@
+VIOLET THEME - FOR WEBDECK PLAYER
+Created by Chris
+\ No newline at end of file
diff --git a/themes/violet/fonts/DS-DIGII.TTF b/themes/violet/fonts/DS-DIGII.TTF
new file mode 100644
index 0000000..2aae3d8
--- /dev/null
+++ b/themes/violet/fonts/DS-DIGII.TTF
diff --git a/themes/violet/fonts/EurostileExtendedBlack.ttf b/themes/violet/fonts/EurostileExtendedBlack.ttf
new file mode 100644
index 0000000..8856fbe
--- /dev/null
+++ b/themes/violet/fonts/EurostileExtendedBlack.ttf
diff --git a/themes/violet/fonts/licenses/DIGITAL.TXT b/themes/violet/fonts/licenses/DIGITAL.TXT
new file mode 100644
index 0000000..484dd47
--- /dev/null
+++ b/themes/violet/fonts/licenses/DIGITAL.TXT
@@ -0,0 +1,40 @@
+DS-Font's TrueType Fonts
+Font name: DS-Digital (Normal, Bold, Italic, Bold Italic), Version 1.0
+Author: Dusit Supasawat
+Web Site: http://ds-font.hypermart.net
+Contact me: Dusit Supasawat, 325/38 Suksawat32 Ratburana Bangkok Thailand 10140
+Email address: dusit@mailcity.com
+
+Thanks for trying! We hope you really enjoy this my typeface. This font is 
+distributed as shareware. You can use this font for a long time as you want. 
+After all, when you think this font can be usefulness for you. You can send 
+me some money, that would be way cool.
+
+I'm only asking $20 US shareware fee per this typeface for personal use. 
+And $45 US is the usual amount per this typeface for commercial use.
+
+Distribution: You are free to distribute this archive so long as this text 
+file is distributed with the archive, the font file have not been modified, 
+and it is understood that the font's copyright remains with the original 
+author (Dusit Supasawat).
+
+To register send your payment to:
+
+Dusit Supasawat
+325/38 Suksawat32 Ratburana
+Bangkok Thailand 10140
+
+And fill out something as this order form, and send it in with your payment.
+
+Font name:_________________________________________
+Your information
+Name:______________________________________________
+Address:___________________________________________
+City, State : _____________________________________
+Zip Code:__________________________________________
+Country:___________________________________________
+E-MAIL address:____________________________________
+
+
+You will receive fonts which you order by Email after registration. These fonts
+will be generated for you by specify your name in font information.
+\ No newline at end of file
diff --git a/themes/violet/fonts/licenses/slkscr.txt b/themes/violet/fonts/licenses/slkscr.txt
new file mode 100644
index 0000000..a3d852e
--- /dev/null
+++ b/themes/violet/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/violet/images/green-light-off.gif b/themes/violet/images/green-light-off.gif
new file mode 100644
index 0000000..eb106e4
--- /dev/null
+++ b/themes/violet/images/green-light-off.gif
diff --git a/themes/violet/images/green-light-on.gif b/themes/violet/images/green-light-on.gif
new file mode 100644
index 0000000..1001fb9
--- /dev/null
+++ b/themes/violet/images/green-light-on.gif
diff --git a/themes/violet/images/info.png b/themes/violet/images/info.png
new file mode 100644
index 0000000..4532073
--- /dev/null
+++ b/themes/violet/images/info.png
diff --git a/themes/violet/images/mute.png b/themes/violet/images/mute.png
new file mode 100644
index 0000000..4a95ef4
--- /dev/null
+++ b/themes/violet/images/mute.png
diff --git a/themes/violet/images/next.png b/themes/violet/images/next.png
new file mode 100644
index 0000000..26b73b4
--- /dev/null
+++ b/themes/violet/images/next.png
diff --git a/themes/violet/images/pause.png b/themes/violet/images/pause.png
new file mode 100644
index 0000000..f71dd7d
--- /dev/null
+++ b/themes/violet/images/pause.png
diff --git a/themes/violet/images/play.png b/themes/violet/images/play.png
new file mode 100644
index 0000000..889fcc7
--- /dev/null
+++ b/themes/violet/images/play.png
diff --git a/themes/violet/images/prev.png b/themes/violet/images/prev.png
new file mode 100644
index 0000000..1ec7092
--- /dev/null
+++ b/themes/violet/images/prev.png
diff --git a/themes/violet/images/sound.png b/themes/violet/images/sound.png
new file mode 100644
index 0000000..a979fac
--- /dev/null
+++ b/themes/violet/images/sound.png
diff --git a/themes/violet/images/stop.png b/themes/violet/images/stop.png
new file mode 100644
index 0000000..b8210b1
--- /dev/null
+++ b/themes/violet/images/stop.png
diff --git a/themes/violet/logo.png b/themes/violet/logo.png
new file mode 100644
index 0000000..730c4e5
--- /dev/null
+++ b/themes/violet/logo.png
diff --git a/themes/violet/webdeck-player.css b/themes/violet/webdeck-player.css
new file mode 100644
index 0000000..7596ad5
--- /dev/null
+++ b/themes/violet/webdeck-player.css
@@ -0,0 +1,351 @@
+/* Font import */
+@font-face {font-family: DS-Digital; src: url(./fonts/DS-DIGII.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: monospace;
+    color: white;
+    background: linear-gradient(90deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+}
+
+select{
+    margin-right: 1px;
+}
+
+button{
+    padding: 4px;
+    margin-right: 1px;
+    font-family: Eurostile, monospace;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 8pt;
+    color: gainsboro;
+
+    background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gray;
+    border-radius: 20px;
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);
+}
+
+button:active{
+    background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gray;
+    border-radius: 20px;
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);
+}
+
+.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: Eurostile, monospace;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 8pt;
+    color: gainsboro;
+    padding:0 5px;
+
+    background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gray;
+    border-radius: 20px;
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);
+}
+
+select option{
+    background: black;
+}
+
+select:active{
+    background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gray;
+    border-radius: 20px;
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75);
+}
+
+
+
+
+/* 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(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 1px gainsboro;
+    border-radius: 20px;
+
+    border-radius: 5px;
+    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
+
+    height: 0.8rem;
+    width: 1.5rem;
+}
+
+input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ {
+    background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gainsboro;
+
+    border-radius: 10px;
+    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
+}
+
+
+
+input[type="range"]::-moz-range-thumb /* For Firefox */ {
+    background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 1px gainsboro;
+    border-radius: 20px;
+
+    border-radius: 5px;
+    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
+
+    height: 0.8rem;
+    width: 1.5rem;
+}
+
+input[type="range"]::-moz-range-thumb:active /* For Firefox */ {
+    background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%);
+    border: groove 2px gainsboro;
+
+    border-radius: 10px;
+    box-shadow: 0px 2px 3px 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: gainsboro;
+    font-family: Eurostile, Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 10pt;
+}
+
+#player-title-bar:before,
+#player-title-bar:after{
+    content: "";
+    flex: 1;
+    margin: auto 1em;
+    height: 2px;
+    border-top: ridge white 2px;
+    border-bottom: ridge white 2px;
+}
+
+/* Player body */
+#player-body{
+    margin: 2px;
+    padding: 5px;
+    border: inset 2px dimgray;
+    border-radius: 5px;
+    border-bottom-left-radius: 8%;
+    border-bottom-right-radius: 8%;
+    background: linear-gradient(90deg, rgb(222, 206, 247) 0%, rgba(184,151,235,1) 10%, rgba(84,60,124,1) 90%);
+}
+
+/* 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: #8c9569;
+    color: 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);
+    margin-bottom: 5px;
+    padding: 2px;
+    font-family: DS-Digital, monospace;
+    font-size: large;
+    letter-spacing: 0.1em;
+}
+
+.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;
+    padding: 3px;
+    display: inline-block;
+    width: fit-content;
+    background: none;
+    border-radius: 5px;
+    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;
+}