From 502c4c5cc2c59928ad6ea4092fc161754ca1d7dd Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Fri, 26 May 2023 17:31:35 +0530 Subject: webplayer --- themes/default/about.txt | 2 + themes/default/fonts/licenses/slkscr.txt | 25 ++ themes/default/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/default/images/green-light-off.gif | Bin 0 -> 114 bytes themes/default/images/green-light-on.gif | Bin 0 -> 113 bytes themes/default/images/info.png | Bin 0 -> 1639 bytes themes/default/images/mute.png | Bin 0 -> 1648 bytes themes/default/images/next.png | Bin 0 -> 1287 bytes themes/default/images/pause.png | Bin 0 -> 329 bytes themes/default/images/play.png | Bin 0 -> 1253 bytes themes/default/images/prev.png | Bin 0 -> 1420 bytes themes/default/images/slider.gif | Bin 0 -> 1293 bytes themes/default/images/sound.png | Bin 0 -> 4277 bytes themes/default/images/stop.png | Bin 0 -> 297 bytes themes/default/logo.png | Bin 0 -> 10199 bytes themes/default/webdeck-player.css | 322 +++++++++++++++++++++++ themes/minimal/about.txt | 2 + themes/minimal/fonts/licenses/slkscr.txt | 25 ++ themes/minimal/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/minimal/images/green-light-off.gif | Bin 0 -> 114 bytes themes/minimal/images/green-light-on.gif | Bin 0 -> 113 bytes themes/minimal/images/info.png | Bin 0 -> 1639 bytes themes/minimal/images/mute.png | Bin 0 -> 1648 bytes themes/minimal/images/next.png | Bin 0 -> 1287 bytes themes/minimal/images/pause.png | Bin 0 -> 329 bytes themes/minimal/images/play.png | Bin 0 -> 1253 bytes themes/minimal/images/prev.png | Bin 0 -> 1420 bytes themes/minimal/images/slider.gif | Bin 0 -> 1293 bytes themes/minimal/images/sound.png | Bin 0 -> 4277 bytes themes/minimal/images/stop.png | Bin 0 -> 297 bytes themes/minimal/logo.png | Bin 0 -> 10199 bytes themes/minimal/webdeck-player.css | 322 +++++++++++++++++++++++ themes/red-grunge/about.txt | 2 + themes/red-grunge/fonts/licenses/slkscr.txt | 25 ++ themes/red-grunge/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/red-grunge/images/background.jpg | Bin 0 -> 161954 bytes themes/red-grunge/images/green-light-off.gif | Bin 0 -> 1148 bytes themes/red-grunge/images/green-light-on.gif | Bin 0 -> 1147 bytes themes/red-grunge/images/info.png | Bin 0 -> 1479 bytes themes/red-grunge/images/mute.png | Bin 0 -> 1367 bytes themes/red-grunge/images/next.png | Bin 0 -> 1113 bytes themes/red-grunge/images/pause.png | Bin 0 -> 308 bytes themes/red-grunge/images/play.png | Bin 0 -> 1031 bytes themes/red-grunge/images/prev.png | Bin 0 -> 1224 bytes themes/red-grunge/images/slider.gif | Bin 0 -> 1269 bytes themes/red-grunge/images/sound.png | Bin 0 -> 2210 bytes themes/red-grunge/images/stop.png | Bin 0 -> 1778 bytes themes/red-grunge/logo.png | Bin 0 -> 10199 bytes themes/red-grunge/webdeck-player.css | 345 ++++++++++++++++++++++++ themes/silver/about.txt | 2 + themes/silver/fonts/EurostileExtendedBlack.ttf | Bin 0 -> 32324 bytes themes/silver/fonts/LED-Dot-Matrix.ttf | Bin 0 -> 46436 bytes themes/silver/fonts/licenses/slkscr.txt | 25 ++ themes/silver/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/silver/images/green-light-off.gif | Bin 0 -> 114 bytes themes/silver/images/green-light-on.gif | Bin 0 -> 113 bytes themes/silver/images/info.png | Bin 0 -> 1639 bytes themes/silver/images/mute.png | Bin 0 -> 1648 bytes themes/silver/images/next.png | Bin 0 -> 1287 bytes themes/silver/images/pause.png | Bin 0 -> 329 bytes themes/silver/images/play.png | Bin 0 -> 1253 bytes themes/silver/images/prev.png | Bin 0 -> 1420 bytes themes/silver/images/sound.png | Bin 0 -> 4277 bytes themes/silver/images/stop.png | Bin 0 -> 297 bytes themes/silver/logo.png | Bin 0 -> 10199 bytes themes/silver/webdeck-player.css | 346 ++++++++++++++++++++++++ themes/violet/about.txt | 2 + themes/violet/fonts/DS-DIGII.TTF | Bin 0 -> 24676 bytes themes/violet/fonts/EurostileExtendedBlack.ttf | Bin 0 -> 32324 bytes themes/violet/fonts/licenses/DIGITAL.TXT | 40 +++ themes/violet/fonts/licenses/slkscr.txt | 25 ++ themes/violet/images/green-light-off.gif | Bin 0 -> 114 bytes themes/violet/images/green-light-on.gif | Bin 0 -> 113 bytes themes/violet/images/info.png | Bin 0 -> 1479 bytes themes/violet/images/mute.png | Bin 0 -> 1367 bytes themes/violet/images/next.png | Bin 0 -> 1113 bytes themes/violet/images/pause.png | Bin 0 -> 308 bytes themes/violet/images/play.png | Bin 0 -> 1031 bytes themes/violet/images/prev.png | Bin 0 -> 1224 bytes themes/violet/images/sound.png | Bin 0 -> 2210 bytes themes/violet/images/stop.png | Bin 0 -> 1778 bytes themes/violet/logo.png | Bin 0 -> 10199 bytes themes/violet/webdeck-player.css | 351 +++++++++++++++++++++++++ 83 files changed, 1861 insertions(+) create mode 100644 themes/default/about.txt create mode 100644 themes/default/fonts/licenses/slkscr.txt create mode 100644 themes/default/fonts/slkscr.ttf create mode 100644 themes/default/images/green-light-off.gif create mode 100644 themes/default/images/green-light-on.gif create mode 100644 themes/default/images/info.png create mode 100644 themes/default/images/mute.png create mode 100644 themes/default/images/next.png create mode 100644 themes/default/images/pause.png create mode 100644 themes/default/images/play.png create mode 100644 themes/default/images/prev.png create mode 100644 themes/default/images/slider.gif create mode 100644 themes/default/images/sound.png create mode 100644 themes/default/images/stop.png create mode 100644 themes/default/logo.png create mode 100644 themes/default/webdeck-player.css create mode 100644 themes/minimal/about.txt create mode 100644 themes/minimal/fonts/licenses/slkscr.txt create mode 100644 themes/minimal/fonts/slkscr.ttf create mode 100644 themes/minimal/images/green-light-off.gif create mode 100644 themes/minimal/images/green-light-on.gif create mode 100644 themes/minimal/images/info.png create mode 100644 themes/minimal/images/mute.png create mode 100644 themes/minimal/images/next.png create mode 100644 themes/minimal/images/pause.png create mode 100644 themes/minimal/images/play.png create mode 100644 themes/minimal/images/prev.png create mode 100644 themes/minimal/images/slider.gif create mode 100644 themes/minimal/images/sound.png create mode 100644 themes/minimal/images/stop.png create mode 100644 themes/minimal/logo.png create mode 100644 themes/minimal/webdeck-player.css create mode 100644 themes/red-grunge/about.txt create mode 100644 themes/red-grunge/fonts/licenses/slkscr.txt create mode 100644 themes/red-grunge/fonts/slkscr.ttf create mode 100644 themes/red-grunge/images/background.jpg create mode 100644 themes/red-grunge/images/green-light-off.gif create mode 100644 themes/red-grunge/images/green-light-on.gif create mode 100644 themes/red-grunge/images/info.png create mode 100644 themes/red-grunge/images/mute.png create mode 100644 themes/red-grunge/images/next.png create mode 100644 themes/red-grunge/images/pause.png create mode 100644 themes/red-grunge/images/play.png create mode 100644 themes/red-grunge/images/prev.png create mode 100644 themes/red-grunge/images/slider.gif create mode 100644 themes/red-grunge/images/sound.png create mode 100644 themes/red-grunge/images/stop.png create mode 100644 themes/red-grunge/logo.png create mode 100644 themes/red-grunge/webdeck-player.css create mode 100644 themes/silver/about.txt create mode 100644 themes/silver/fonts/EurostileExtendedBlack.ttf create mode 100644 themes/silver/fonts/LED-Dot-Matrix.ttf create mode 100644 themes/silver/fonts/licenses/slkscr.txt create mode 100644 themes/silver/fonts/slkscr.ttf create mode 100644 themes/silver/images/green-light-off.gif create mode 100644 themes/silver/images/green-light-on.gif create mode 100644 themes/silver/images/info.png create mode 100644 themes/silver/images/mute.png create mode 100644 themes/silver/images/next.png create mode 100644 themes/silver/images/pause.png create mode 100644 themes/silver/images/play.png create mode 100644 themes/silver/images/prev.png create mode 100644 themes/silver/images/sound.png create mode 100644 themes/silver/images/stop.png create mode 100644 themes/silver/logo.png create mode 100644 themes/silver/webdeck-player.css create mode 100644 themes/violet/about.txt create mode 100644 themes/violet/fonts/DS-DIGII.TTF create mode 100644 themes/violet/fonts/EurostileExtendedBlack.ttf create mode 100644 themes/violet/fonts/licenses/DIGITAL.TXT create mode 100644 themes/violet/fonts/licenses/slkscr.txt create mode 100644 themes/violet/images/green-light-off.gif create mode 100644 themes/violet/images/green-light-on.gif create mode 100644 themes/violet/images/info.png create mode 100644 themes/violet/images/mute.png create mode 100644 themes/violet/images/next.png create mode 100644 themes/violet/images/pause.png create mode 100644 themes/violet/images/play.png create mode 100644 themes/violet/images/prev.png create mode 100644 themes/violet/images/sound.png create mode 100644 themes/violet/images/stop.png create mode 100644 themes/violet/logo.png create mode 100644 themes/violet/webdeck-player.css (limited to 'themes') diff --git a/themes/default/about.txt b/themes/default/about.txt new file mode 100644 index 0000000..72e650d --- /dev/null +++ b/themes/default/about.txt @@ -0,0 +1,2 @@ +DEFAULT THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/default/fonts/licenses/slkscr.txt b/themes/default/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/default/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/default/fonts/slkscr.ttf b/themes/default/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/default/fonts/slkscr.ttf differ diff --git a/themes/default/images/green-light-off.gif b/themes/default/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/default/images/green-light-off.gif differ diff --git a/themes/default/images/green-light-on.gif b/themes/default/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/default/images/green-light-on.gif differ diff --git a/themes/default/images/info.png b/themes/default/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/default/images/info.png differ diff --git a/themes/default/images/mute.png b/themes/default/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/default/images/mute.png differ diff --git a/themes/default/images/next.png b/themes/default/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/default/images/next.png differ diff --git a/themes/default/images/pause.png b/themes/default/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/default/images/pause.png differ diff --git a/themes/default/images/play.png b/themes/default/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/default/images/play.png differ diff --git a/themes/default/images/prev.png b/themes/default/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/default/images/prev.png differ diff --git a/themes/default/images/slider.gif b/themes/default/images/slider.gif new file mode 100644 index 0000000..86a5b9f Binary files /dev/null and b/themes/default/images/slider.gif differ diff --git a/themes/default/images/sound.png b/themes/default/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/default/images/sound.png differ diff --git a/themes/default/images/stop.png b/themes/default/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/default/images/stop.png differ diff --git a/themes/default/logo.png b/themes/default/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/default/logo.png differ diff --git a/themes/default/webdeck-player.css b/themes/default/webdeck-player.css new file mode 100644 index 0000000..598d791 --- /dev/null +++ b/themes/default/webdeck-player.css @@ -0,0 +1,322 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + 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(to right, #212133 0%, #343353 50%, #212133 100%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + border: outset 2px #ECE0B8; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +button:active{ + background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + border: inset 2px #ECE0B8; + border-radius: 2px; + 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(to bottom, #ECE0B8 0%, #c5b580 100%); + border: outset 2px #ECE0B8; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +select:active{ + background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + border: inset 2px #ECE0B8; + border-radius: 2px; + 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: inset 2px #403f67; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: #201e3a; + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: #201e3a; + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #ECE0B8; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #ECE0B8; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge #ECE0B8 2px; + border-bottom: ridge #ECE0B8 2px; +} + +/* Player body */ +#player-body{ + padding: 5px; + border: groove 3px #403f67; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #403f67; +} + + +/* Player info */ +#info-screen{ + background: black; + color: limegreen; + border: inset 2px #403f67; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +.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: 5px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: #201e3a; + border: inset 2px #403f67; + 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; +} diff --git a/themes/minimal/about.txt b/themes/minimal/about.txt new file mode 100644 index 0000000..d950449 --- /dev/null +++ b/themes/minimal/about.txt @@ -0,0 +1,2 @@ +MINIMAL THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/minimal/fonts/licenses/slkscr.txt b/themes/minimal/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/minimal/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/minimal/fonts/slkscr.ttf b/themes/minimal/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/minimal/fonts/slkscr.ttf differ diff --git a/themes/minimal/images/green-light-off.gif b/themes/minimal/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/minimal/images/green-light-off.gif differ diff --git a/themes/minimal/images/green-light-on.gif b/themes/minimal/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/minimal/images/green-light-on.gif differ diff --git a/themes/minimal/images/info.png b/themes/minimal/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/minimal/images/info.png differ diff --git a/themes/minimal/images/mute.png b/themes/minimal/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/minimal/images/mute.png differ diff --git a/themes/minimal/images/next.png b/themes/minimal/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/minimal/images/next.png differ diff --git a/themes/minimal/images/pause.png b/themes/minimal/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/minimal/images/pause.png differ diff --git a/themes/minimal/images/play.png b/themes/minimal/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/minimal/images/play.png differ diff --git a/themes/minimal/images/prev.png b/themes/minimal/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/minimal/images/prev.png differ diff --git a/themes/minimal/images/slider.gif b/themes/minimal/images/slider.gif new file mode 100644 index 0000000..2d9e1ff Binary files /dev/null and b/themes/minimal/images/slider.gif differ diff --git a/themes/minimal/images/sound.png b/themes/minimal/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/minimal/images/sound.png differ diff --git a/themes/minimal/images/stop.png b/themes/minimal/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/minimal/images/stop.png differ diff --git a/themes/minimal/logo.png b/themes/minimal/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/minimal/logo.png differ diff --git a/themes/minimal/webdeck-player.css b/themes/minimal/webdeck-player.css new file mode 100644 index 0000000..1803a4c --- /dev/null +++ b/themes/minimal/webdeck-player.css @@ -0,0 +1,322 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Silkscreen, monospace; + color: black; + background: linear-gradient(180deg, rgb(92, 92, 92) 0%, rgb(49, 49, 49) 10%, rgba(30,30,30,1) 90%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +button:active{ + background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + 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(to bottom, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +select:active{ + background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + 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: inset 2px silver; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #eaeaea; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #eaeaea; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #eaeaea; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #eaeaea; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + color: white; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; +} + +/* Player body */ +#player-body{ + background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(232,232,232,1) 30%, rgba(214,214,214,1) 100%); + padding: 5px; + border: groove 3px gray; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #403f67; +} + + +/* Player info */ +#info-screen{ + background: black; + color: limegreen; + border: inset 2px #403f67; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +.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: 5px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: dimgray; + border: inset 2px silver; + 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; +} diff --git a/themes/red-grunge/about.txt b/themes/red-grunge/about.txt new file mode 100644 index 0000000..48b310d --- /dev/null +++ b/themes/red-grunge/about.txt @@ -0,0 +1,2 @@ +RED GRUNGE THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/red-grunge/fonts/licenses/slkscr.txt b/themes/red-grunge/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/red-grunge/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/red-grunge/fonts/slkscr.ttf b/themes/red-grunge/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/red-grunge/fonts/slkscr.ttf differ diff --git a/themes/red-grunge/images/background.jpg b/themes/red-grunge/images/background.jpg new file mode 100644 index 0000000..a52a384 Binary files /dev/null and b/themes/red-grunge/images/background.jpg differ diff --git a/themes/red-grunge/images/green-light-off.gif b/themes/red-grunge/images/green-light-off.gif new file mode 100644 index 0000000..d3d9971 Binary files /dev/null and b/themes/red-grunge/images/green-light-off.gif differ diff --git a/themes/red-grunge/images/green-light-on.gif b/themes/red-grunge/images/green-light-on.gif new file mode 100644 index 0000000..10d3853 Binary files /dev/null and b/themes/red-grunge/images/green-light-on.gif differ diff --git a/themes/red-grunge/images/info.png b/themes/red-grunge/images/info.png new file mode 100644 index 0000000..4532073 Binary files /dev/null and b/themes/red-grunge/images/info.png differ diff --git a/themes/red-grunge/images/mute.png b/themes/red-grunge/images/mute.png new file mode 100644 index 0000000..4a95ef4 Binary files /dev/null and b/themes/red-grunge/images/mute.png differ diff --git a/themes/red-grunge/images/next.png b/themes/red-grunge/images/next.png new file mode 100644 index 0000000..26b73b4 Binary files /dev/null and b/themes/red-grunge/images/next.png differ diff --git a/themes/red-grunge/images/pause.png b/themes/red-grunge/images/pause.png new file mode 100644 index 0000000..f71dd7d Binary files /dev/null and b/themes/red-grunge/images/pause.png differ diff --git a/themes/red-grunge/images/play.png b/themes/red-grunge/images/play.png new file mode 100644 index 0000000..889fcc7 Binary files /dev/null and b/themes/red-grunge/images/play.png differ diff --git a/themes/red-grunge/images/prev.png b/themes/red-grunge/images/prev.png new file mode 100644 index 0000000..1ec7092 Binary files /dev/null and b/themes/red-grunge/images/prev.png differ diff --git a/themes/red-grunge/images/slider.gif b/themes/red-grunge/images/slider.gif new file mode 100644 index 0000000..37eeae6 Binary files /dev/null and b/themes/red-grunge/images/slider.gif differ diff --git a/themes/red-grunge/images/sound.png b/themes/red-grunge/images/sound.png new file mode 100644 index 0000000..a979fac Binary files /dev/null and b/themes/red-grunge/images/sound.png differ diff --git a/themes/red-grunge/images/stop.png b/themes/red-grunge/images/stop.png new file mode 100644 index 0000000..b8210b1 Binary files /dev/null and b/themes/red-grunge/images/stop.png differ diff --git a/themes/red-grunge/logo.png b/themes/red-grunge/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/red-grunge/logo.png differ diff --git a/themes/red-grunge/webdeck-player.css b/themes/red-grunge/webdeck-player.css new file mode 100644 index 0000000..52bd00b --- /dev/null +++ b/themes/red-grunge/webdeck-player.css @@ -0,0 +1,345 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Georgia, 'Times New Roman', Times, serif; + color: black; + background: black; +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Georgia, 'Times New Roman', Times, serif; + text-transform: lowercase; + font-weight: bold; + color: white; + + background: #202020; + border: outset 2px #a42c2c; + border-radius: 2px; +} + +button:active{ + background: #000000; + border: outset 2px #6e1c1c; + border-radius: 2px; + 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: Georgia, 'Times New Roman', Times, serif; + text-transform: lowercase; + font-weight: bold; + color: white; + padding: 0 2px; + + background: #202020; + border: outset 2px #a42c2c; + border-radius: 2px; +} + +select option{ + background: black; +} + +select:active{ + background: #000000; + border: outset 2px #6e1c1c; + border-radius: 2px; + 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: inset 2px #2c2c2c; + + height: 5px; + margin-top: 7px; + margin-bottom: 7px; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #2c2c2c; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 20pt; + width: 12pt; + position: relative; + top: -10px; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #2c2c2c; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #2c2c2c; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1.5rem; + width: 0.8rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #2c2c2c; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + margin-bottom: 2px; + color: #a42c2c; + text-transform: lowercase; + font-weight: bold; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge #a42c2c 2px; + border-bottom: ridge #a42c2c 2px; +} + +/* Player body */ +#player-body{ + padding: 5px; + border: groove 2px #282828; + background: url(./images/background.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #282828; +} + + +/* Player info */ +#info-screen{ + background: black; + font-family: Silkscreen, monospace; + color: white; + border: inset 2px #282828; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); +} + +.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: black; + 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; +} 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 Binary files /dev/null and b/themes/silver/fonts/EurostileExtendedBlack.ttf differ 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 Binary files /dev/null and b/themes/silver/fonts/LED-Dot-Matrix.ttf differ 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 Binary files /dev/null and b/themes/silver/fonts/slkscr.ttf differ 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 Binary files /dev/null and b/themes/silver/images/green-light-off.gif differ 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 Binary files /dev/null and b/themes/silver/images/green-light-on.gif differ diff --git a/themes/silver/images/info.png b/themes/silver/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/silver/images/info.png differ diff --git a/themes/silver/images/mute.png b/themes/silver/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/silver/images/mute.png differ diff --git a/themes/silver/images/next.png b/themes/silver/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/silver/images/next.png differ diff --git a/themes/silver/images/pause.png b/themes/silver/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/silver/images/pause.png differ diff --git a/themes/silver/images/play.png b/themes/silver/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/silver/images/play.png differ diff --git a/themes/silver/images/prev.png b/themes/silver/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/silver/images/prev.png differ diff --git a/themes/silver/images/sound.png b/themes/silver/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/silver/images/sound.png differ diff --git a/themes/silver/images/stop.png b/themes/silver/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/silver/images/stop.png differ diff --git a/themes/silver/logo.png b/themes/silver/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/silver/logo.png differ 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; +} 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 Binary files /dev/null and b/themes/violet/fonts/DS-DIGII.TTF differ diff --git a/themes/violet/fonts/EurostileExtendedBlack.ttf b/themes/violet/fonts/EurostileExtendedBlack.ttf new file mode 100644 index 0000000..8856fbe Binary files /dev/null and b/themes/violet/fonts/EurostileExtendedBlack.ttf differ 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 Binary files /dev/null and b/themes/violet/images/green-light-off.gif differ 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 Binary files /dev/null and b/themes/violet/images/green-light-on.gif differ diff --git a/themes/violet/images/info.png b/themes/violet/images/info.png new file mode 100644 index 0000000..4532073 Binary files /dev/null and b/themes/violet/images/info.png differ diff --git a/themes/violet/images/mute.png b/themes/violet/images/mute.png new file mode 100644 index 0000000..4a95ef4 Binary files /dev/null and b/themes/violet/images/mute.png differ diff --git a/themes/violet/images/next.png b/themes/violet/images/next.png new file mode 100644 index 0000000..26b73b4 Binary files /dev/null and b/themes/violet/images/next.png differ diff --git a/themes/violet/images/pause.png b/themes/violet/images/pause.png new file mode 100644 index 0000000..f71dd7d Binary files /dev/null and b/themes/violet/images/pause.png differ diff --git a/themes/violet/images/play.png b/themes/violet/images/play.png new file mode 100644 index 0000000..889fcc7 Binary files /dev/null and b/themes/violet/images/play.png differ diff --git a/themes/violet/images/prev.png b/themes/violet/images/prev.png new file mode 100644 index 0000000..1ec7092 Binary files /dev/null and b/themes/violet/images/prev.png differ diff --git a/themes/violet/images/sound.png b/themes/violet/images/sound.png new file mode 100644 index 0000000..a979fac Binary files /dev/null and b/themes/violet/images/sound.png differ diff --git a/themes/violet/images/stop.png b/themes/violet/images/stop.png new file mode 100644 index 0000000..b8210b1 Binary files /dev/null and b/themes/violet/images/stop.png differ diff --git a/themes/violet/logo.png b/themes/violet/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/violet/logo.png differ 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; +} -- cgit v1.2.3-59-g8ed1b