diff options
| author |   Biswakalyan Bhuyan <biswa@surgot.in>
| 2023-05-26 17:31:35 +0530 |
|---|---|---|
| committer | Biswakalyan Bhuyan <biswa@surgot.in>
| 2023-05-26 17:31:35 +0530 |
| commit | 502c4c5cc2c59928ad6ea4092fc161754ca1d7dd (patch) | |
| tree | 0fe5924339aeb79dd016b5af7ea12251324bcc8d /themes/violet/webdeck-player.css | |
| download | webdeck-player-502c4c5cc2c59928ad6ea4092fc161754ca1d7dd.tar.gz webdeck-player-502c4c5cc2c59928ad6ea4092fc161754ca1d7dd.tar.bz2 webdeck-player-502c4c5cc2c59928ad6ea4092fc161754ca1d7dd.zip | |
webplayer
Diffstat (limited to 'themes/violet/webdeck-player.css')
| -rw-r--r-- | themes/violet/webdeck-player.css | 351 |
1 files changed, 351 insertions, 0 deletions
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;
+}
|