mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Fixes for chromecasting and embedded player
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -1,9 +1,9 @@
|
||||
.card-image{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
background-size: 180%;
|
||||
height: 100% !important;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
background-size: 180%;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.side_away {
|
||||
@@ -13,30 +13,37 @@
|
||||
transition: all .3s !important;
|
||||
}
|
||||
|
||||
#player_loader_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player_overlay {
|
||||
position: absolute;
|
||||
height: calc(100% - 32px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 50vw;
|
||||
position: absolute;
|
||||
height: calc(100% - 32px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.soundcloud_info_container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
}
|
||||
|
||||
.soundcloud_info_container a {
|
||||
margin: 0 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor:pointer;
|
||||
cursor:pointer;
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
@@ -50,12 +57,12 @@
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.video_only {
|
||||
@@ -93,7 +100,7 @@
|
||||
}
|
||||
|
||||
.list-song {
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
#list-song-html {
|
||||
@@ -101,7 +108,7 @@
|
||||
}
|
||||
|
||||
#song-title{
|
||||
display:none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#zoffchannel{
|
||||
@@ -109,36 +116,36 @@
|
||||
}
|
||||
|
||||
.list-image, .list-suggested-image{
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-image:after {
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
font-family: "Material Icons";
|
||||
content: "thumb_up";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
font-size: -webkit-xxx-large;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
opacity: 0;
|
||||
/* transition: all .1s ease; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
font-family: "Material Icons";
|
||||
content: "thumb_up";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
font-size: -webkit-xxx-large;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
opacity: 0;
|
||||
/* transition: all .1s ease; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-suggested-image:after {
|
||||
@@ -162,36 +169,36 @@
|
||||
}
|
||||
|
||||
.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
|
||||
opacity:1;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.vote-span{
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
}
|
||||
|
||||
.list-song{
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
color:white;
|
||||
font:12px Arial,sans-serif;
|
||||
-webkit-transition:height .3s;
|
||||
-moz-transition:height .3s;
|
||||
-o-transition:height .3s;
|
||||
transition:height .3s;
|
||||
height:66px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
color:white;
|
||||
font:12px Arial,sans-serif;
|
||||
-webkit-transition:height .3s;
|
||||
-moz-transition:height .3s;
|
||||
-o-transition:height .3s;
|
||||
transition:height .3s;
|
||||
height:66px;
|
||||
width: 100%;
|
||||
}
|
||||
.list-song .card-content{padding:0;}
|
||||
.list-title{
|
||||
font-size:13px !important;
|
||||
display:block;
|
||||
color:white;font-size:1em;
|
||||
text-align:left;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 2.6rem;
|
||||
font-size:13px !important;
|
||||
display:block;
|
||||
color:white;font-size:1em;
|
||||
text-align:left;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
.card-image{cursor:pointer}
|
||||
.card{
|
||||
@@ -202,8 +209,8 @@
|
||||
}
|
||||
|
||||
#playlist{
|
||||
/*background-color:grey;*/
|
||||
height:100vh;
|
||||
/*background-color:grey;*/
|
||||
height:100vh;
|
||||
width:50vw;
|
||||
overflow:hidden;
|
||||
}
|
||||
@@ -211,14 +218,14 @@
|
||||
#zoffbutton{
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
left: 10px;
|
||||
background-image: url('/assets/images/z.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-position: center;
|
||||
background-size: 135%;
|
||||
background-repeat: no-repeat;
|
||||
bottom: 35px;
|
||||
left: 10px;
|
||||
background-image: url('/assets/images/z.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-position: center;
|
||||
background-size: 135%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.progress{background-color:rgba(0,0,0,0) !important;}
|
||||
@@ -232,11 +239,11 @@
|
||||
background: inherit;
|
||||
|
||||
position: relative;
|
||||
opacity:0;
|
||||
height:32px;
|
||||
width:50vw;
|
||||
color:white;
|
||||
margin-top:-5px;
|
||||
opacity:0;
|
||||
height:32px;
|
||||
width:50vw;
|
||||
color:white;
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
||||
#playpause, #duration, #volume-button
|
||||
@@ -253,7 +260,7 @@
|
||||
|
||||
#playpause:hover, #volume-button:hover, #fullscreen:hover
|
||||
{
|
||||
color:rgba(255,255,255,0.5);
|
||||
color:rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#fullscreen
|
||||
@@ -286,166 +293,166 @@
|
||||
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-slider-vertical .ui-slider-range-min {
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 0px !important;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal .ui-slider-range-min {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
#volume {
|
||||
border-radius: 10px;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
border-radius: 10px;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
}
|
||||
|
||||
#volume.vertical {
|
||||
border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#volume .volume-slid {
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
#volume .volume-slid.vertical {
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
border-radius: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
border-radius: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#volume .volume-handle {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
border: 1px solid lightgrey;
|
||||
margin-top: -9.75px;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
margin-left: -5.75px;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
border: 1px solid lightgrey;
|
||||
margin-top: -9.75px;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
margin-left: -5.75px;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
#volume .volume-handle.vertical {
|
||||
bottom: 0%;
|
||||
display: none;
|
||||
bottom: 0%;
|
||||
display: none;
|
||||
}
|
||||
#volume .volume-handle.ui-state-active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 21px;
|
||||
background: #dadada;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 21px;
|
||||
background: #dadada;
|
||||
}
|
||||
|
||||
#toast-container{
|
||||
left:2%;
|
||||
cursor:pointer;
|
||||
width:70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
/*pointer-events:none;*/
|
||||
left:2%;
|
||||
cursor:pointer;
|
||||
width:70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
/*pointer-events:none;*/
|
||||
}
|
||||
|
||||
.toast {
|
||||
word-break: normal;
|
||||
cursor: pointer;
|
||||
word-break: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.pause
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.hide
|
||||
{
|
||||
display:none !important;
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
#bar
|
||||
{
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -482,24 +489,24 @@ html {
|
||||
}
|
||||
|
||||
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
|
||||
padding:0 1px;
|
||||
padding:0 1px;
|
||||
}
|
||||
|
||||
.next_page_hide, .next_page, .last_page, .last_page_hide{
|
||||
padding:0 0px;
|
||||
display: flex;
|
||||
padding:0 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.first_page, .first_page_hide {
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.last_page, .last_page_hide {
|
||||
padding: 0 10px 0 0;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #2d2d2d;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.vote-container {
|
||||
@@ -509,17 +516,17 @@ body {
|
||||
|
||||
.card-duration {
|
||||
border-top-right-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
.last_page, .last_page_hide, .first_page, .first_page_hide{
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
*/
|
||||
#wrapper{
|
||||
|
||||
Reference in New Issue
Block a user