diff options
Diffstat (limited to 'themes/red-grunge')
17 files changed, 372 insertions, 0 deletions
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 Binary files differnew file mode 100644 index 0000000..85a2037 --- /dev/null +++ b/themes/red-grunge/fonts/slkscr.ttf diff --git a/themes/red-grunge/images/background.jpg b/themes/red-grunge/images/background.jpg Binary files differnew file mode 100644 index 0000000..a52a384 --- /dev/null +++ b/themes/red-grunge/images/background.jpg diff --git a/themes/red-grunge/images/green-light-off.gif b/themes/red-grunge/images/green-light-off.gif Binary files differnew file mode 100644 index 0000000..d3d9971 --- /dev/null +++ b/themes/red-grunge/images/green-light-off.gif diff --git a/themes/red-grunge/images/green-light-on.gif b/themes/red-grunge/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..10d3853 --- /dev/null +++ b/themes/red-grunge/images/green-light-on.gif diff --git a/themes/red-grunge/images/info.png b/themes/red-grunge/images/info.png Binary files differnew file mode 100644 index 0000000..4532073 --- /dev/null +++ b/themes/red-grunge/images/info.png diff --git a/themes/red-grunge/images/mute.png b/themes/red-grunge/images/mute.png Binary files differnew file mode 100644 index 0000000..4a95ef4 --- /dev/null +++ b/themes/red-grunge/images/mute.png diff --git a/themes/red-grunge/images/next.png b/themes/red-grunge/images/next.png Binary files differnew file mode 100644 index 0000000..26b73b4 --- /dev/null +++ b/themes/red-grunge/images/next.png diff --git a/themes/red-grunge/images/pause.png b/themes/red-grunge/images/pause.png Binary files differnew file mode 100644 index 0000000..f71dd7d --- /dev/null +++ b/themes/red-grunge/images/pause.png diff --git a/themes/red-grunge/images/play.png b/themes/red-grunge/images/play.png Binary files differnew file mode 100644 index 0000000..889fcc7 --- /dev/null +++ b/themes/red-grunge/images/play.png diff --git a/themes/red-grunge/images/prev.png b/themes/red-grunge/images/prev.png Binary files differnew file mode 100644 index 0000000..1ec7092 --- /dev/null +++ b/themes/red-grunge/images/prev.png diff --git a/themes/red-grunge/images/slider.gif b/themes/red-grunge/images/slider.gif Binary files differnew file mode 100644 index 0000000..37eeae6 --- /dev/null +++ b/themes/red-grunge/images/slider.gif diff --git a/themes/red-grunge/images/sound.png b/themes/red-grunge/images/sound.png Binary files differnew file mode 100644 index 0000000..a979fac --- /dev/null +++ b/themes/red-grunge/images/sound.png diff --git a/themes/red-grunge/images/stop.png b/themes/red-grunge/images/stop.png Binary files differnew file mode 100644 index 0000000..b8210b1 --- /dev/null +++ b/themes/red-grunge/images/stop.png diff --git a/themes/red-grunge/logo.png b/themes/red-grunge/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/red-grunge/logo.png 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;
+}
|
