mirror of
https://github.com/KevinMidboe/zoff.git
synced 2026-01-07 01:55:34 +00:00
Somewhat prettier css
This commit is contained in:
Kasper Rynning-Tønnesen
63
server/public/assets/css/animations.css
Normal file
63
server/public/assets/css/animations.css
Normal file
@@ -0,0 +1,63 @@
|
||||
@keyframes snow {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 500px, 400px 400px, 300px 300px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes snow {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 500px, 400px 400px, 300px 300px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes snow {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 500px, 400px 400px, 300px 300px;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes snow {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 500px, 400px 400px, 300px 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
*
|
||||
* Source: https://codepen.io/NickyCDK/pen/AIonk
|
||||
*
|
||||
*/
|
||||
|
||||
#snow {
|
||||
pointer-events: none;
|
||||
background: none;
|
||||
font-family: Androgyne;
|
||||
background-image: url("/assets/images/s1.png"), url("/assets/images/s2.png"),
|
||||
url("/assets/images/s3.png");
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
-webkit-animation: snow 10s linear infinite;
|
||||
-moz-animation: snow 10s linear infinite;
|
||||
-ms-animation: snow 10s linear infinite;
|
||||
animation: snow 10s linear infinite;
|
||||
}
|
||||
|
||||
#snow.snow-channel {
|
||||
z-index: 9999;
|
||||
width: calc(100% - 0.75rem);
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.card-image{
|
||||
.card-image {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
@@ -7,58 +7,63 @@
|
||||
}
|
||||
|
||||
.side_away {
|
||||
-webkit-transition: all .3s !important;
|
||||
-moz-transition: all .3s !important;
|
||||
-o-transition: all .3s !important;
|
||||
transition: all .3s !important;
|
||||
-webkit-transition: all 0.3s !important;
|
||||
-moz-transition: all 0.3s !important;
|
||||
-o-transition: all 0.3s !important;
|
||||
transition: all 0.3s !important;
|
||||
}
|
||||
|
||||
.prev.playbar, .skip.playbar {
|
||||
float: left;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
padding-top: 3px;
|
||||
.prev.playbar,
|
||||
.skip.playbar {
|
||||
float: left;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.site_loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.prev, .skip {
|
||||
.prev,
|
||||
.skip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#playpause, .prev.playbar, .skip.playbar {
|
||||
padding: 0 2.5px;
|
||||
#playpause,
|
||||
.prev.playbar,
|
||||
.skip.playbar {
|
||||
padding: 0 2.5px;
|
||||
}
|
||||
.playbar-btn:hover {
|
||||
background-color: rgba(0,0,0,.6);
|
||||
color: hsla(0,0%,100%,.5);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none!important;
|
||||
display: none !important;
|
||||
}
|
||||
.playbar-btn {
|
||||
cursor: pointer;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
#controls, .playbar {
|
||||
color: #fff;
|
||||
#controls,
|
||||
.playbar {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#player_loader_container {
|
||||
@@ -84,7 +89,7 @@
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0,0,0,.7);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.soundcloud_info_container a {
|
||||
@@ -92,7 +97,7 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
@@ -115,34 +120,36 @@
|
||||
}
|
||||
|
||||
.video_only {
|
||||
width:100vw !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
#player{
|
||||
width:60vw;
|
||||
#player {
|
||||
width: 60vw;
|
||||
height: calc(100vh - 32px);
|
||||
padding-top: 51px;
|
||||
}
|
||||
|
||||
#pageButtons{
|
||||
#pageButtons {
|
||||
text-align: center;
|
||||
padding-top:15px;
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.prev_page, .next_page{
|
||||
.prev_page,
|
||||
.next_page {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#wrapper{
|
||||
height:calc(100% - 46px);
|
||||
#wrapper {
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
|
||||
.prev_page_hide, .next_page_hide{
|
||||
.prev_page_hide,
|
||||
.next_page_hide {
|
||||
visibility: visible !important;
|
||||
color:gray;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.list-song {
|
||||
@@ -150,26 +157,27 @@
|
||||
}
|
||||
|
||||
#list-song-html {
|
||||
display:none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#song-title{
|
||||
display:none;
|
||||
#song-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#zoffchannel{
|
||||
display:none;
|
||||
#zoffchannel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-image, .list-suggested-image{
|
||||
.list-image,
|
||||
.list-suggested-image {
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-image:after {
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
font-family: "Material Icons";
|
||||
content: "thumb_up";
|
||||
speak: none;
|
||||
@@ -186,7 +194,7 @@
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0;
|
||||
/* transition: all .1s ease; */
|
||||
display: flex;
|
||||
@@ -203,58 +211,64 @@
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e625";/*"\e800";*/
|
||||
color:white;
|
||||
font-size:65px;
|
||||
position:absolute;
|
||||
width:100%; height:100%;
|
||||
top:0; left:0;
|
||||
background:rgba(0,0,0,0.8);
|
||||
opacity:0;
|
||||
transition: all .1s ease;
|
||||
content: "\e625"; /*"\e800";*/
|
||||
color: white;
|
||||
font-size: 65px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
|
||||
opacity:1;
|
||||
.vote-container:hover .list-image:after,
|
||||
.add-suggested:hover .list-suggested-image:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.vote-span{
|
||||
.vote-span {
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.list-song{
|
||||
.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;
|
||||
color: white;
|
||||
font: 12px Arial, sans-serif;
|
||||
-webkit-transition: height 0.3s;
|
||||
-moz-transition: height 0.3s;
|
||||
-o-transition: height 0.3s;
|
||||
transition: height 0.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;
|
||||
.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;
|
||||
}
|
||||
.card-image{cursor:pointer}
|
||||
.card{
|
||||
.card-image {
|
||||
cursor: pointer;
|
||||
}
|
||||
.card {
|
||||
margin: 2.5px 0 2.5px 0 !important;
|
||||
}
|
||||
.card:hover{
|
||||
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);
|
||||
.card:hover {
|
||||
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 5px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#playlist{
|
||||
#playlist {
|
||||
height: 100vh;
|
||||
width: 40vw;
|
||||
overflow: hidden;
|
||||
@@ -263,7 +277,7 @@
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#zoffbutton{
|
||||
#zoffbutton {
|
||||
cursor: pointer;
|
||||
background-image: url(/assets/images/z.svg);
|
||||
width: 90px;
|
||||
@@ -273,74 +287,75 @@
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.progress{background-color:rgba(0,0,0,0) !important;}
|
||||
|
||||
.indeterminate {
|
||||
background-color:white !important;
|
||||
.progress {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
#controls
|
||||
{
|
||||
.indeterminate {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
#controls {
|
||||
background: inherit;
|
||||
|
||||
position: relative;
|
||||
opacity:0;
|
||||
height:32px;
|
||||
width:60vw;
|
||||
color:white;
|
||||
margin-top:-5px;
|
||||
opacity: 0;
|
||||
height: 32px;
|
||||
width: 60vw;
|
||||
color: white;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#playpause, #duration, #volume-button
|
||||
{
|
||||
float:left;
|
||||
color:white;
|
||||
#playpause,
|
||||
#duration,
|
||||
#volume-button {
|
||||
float: left;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.margin-playbar {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
#seekToDuration{
|
||||
position: absolute;
|
||||
background: #2d2d2d;
|
||||
color:white;
|
||||
padding: 10px 8px;
|
||||
z-index: 2000;
|
||||
background-color: #2d2d2d;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
min-height: 36px;
|
||||
text-align: center;
|
||||
max-width: calc(100% - 4px);
|
||||
pointer-events: none;
|
||||
#seekToDuration {
|
||||
position: absolute;
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
padding: 10px 8px;
|
||||
z-index: 2000;
|
||||
background-color: #2d2d2d;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
min-height: 36px;
|
||||
text-align: center;
|
||||
max-width: calc(100% - 4px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#playpause, #volume-button
|
||||
{
|
||||
#playpause,
|
||||
#volume-button {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
#playpause:hover, #volume-button:hover, #fullscreen:hover
|
||||
{
|
||||
color:rgba(255,255,255,0.5);
|
||||
#playpause:hover,
|
||||
#volume-button:hover,
|
||||
#fullscreen:hover {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#fullscreen
|
||||
{
|
||||
float:right;
|
||||
color:white;
|
||||
margin-right:15px;
|
||||
#fullscreen {
|
||||
float: right;
|
||||
color: white;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#duration, #viewers
|
||||
{
|
||||
margin-top:5px;
|
||||
font-family:"Roboto", sans-serif;
|
||||
font-weight:300;
|
||||
margin-left:15px;
|
||||
margin-right:10px;
|
||||
#duration,
|
||||
#viewers {
|
||||
margin-top: 5px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.channel-info-container {
|
||||
@@ -349,7 +364,7 @@
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding-left: 5px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
@@ -358,21 +373,22 @@
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#viewers{
|
||||
#viewers {
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#play, #pause, #volume-button, #fullscreen
|
||||
{
|
||||
font-size:20px;
|
||||
cursor:pointer;
|
||||
#play,
|
||||
#pause,
|
||||
#volume-button,
|
||||
#fullscreen {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
width: 0.8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider {
|
||||
@@ -391,16 +407,16 @@
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
font-size: 0.7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
left: -0.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
margin-bottom: -0.6em;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
@@ -423,27 +439,27 @@
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
font-size: 0.7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
top: -0.3em;
|
||||
margin-left: -0.6em;
|
||||
}
|
||||
#volume {
|
||||
border-radius: 10px;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
height: 5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
@@ -486,7 +502,8 @@
|
||||
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);
|
||||
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;
|
||||
@@ -494,10 +511,10 @@
|
||||
background: #dadada;
|
||||
}
|
||||
|
||||
#toast-container{
|
||||
left:2%;
|
||||
cursor:pointer;
|
||||
width:70vw;
|
||||
#toast-container {
|
||||
left: 2%;
|
||||
cursor: pointer;
|
||||
width: 70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
@@ -509,29 +526,25 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play
|
||||
{
|
||||
.play {
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.pause
|
||||
{
|
||||
.pause {
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.hide
|
||||
{
|
||||
display:none !important;
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#bar
|
||||
{
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
#bar {
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -542,22 +555,24 @@ html {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
#pageButtons, #pageButtons a{
|
||||
color:white !important;
|
||||
#pageButtons,
|
||||
#pageButtons a {
|
||||
color: white !important;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#pageButtons a, #pageButtons span {
|
||||
#pageButtons a,
|
||||
#pageButtons span {
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
#pageNumber{
|
||||
#pageNumber {
|
||||
cursor: default;
|
||||
color: white;
|
||||
padding:0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
@@ -565,38 +580,50 @@ html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prev_page, .next_page, .last_page, .first_page{
|
||||
.prev_page,
|
||||
.next_page,
|
||||
.last_page,
|
||||
.first_page {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.prev_page_hide, .next_page_hide, .last_page_hide, .first_page_hide{
|
||||
.prev_page_hide,
|
||||
.next_page_hide,
|
||||
.last_page_hide,
|
||||
.first_page_hide {
|
||||
visibility: visible !important;
|
||||
color:gray;
|
||||
cursor:default;
|
||||
color: gray;
|
||||
cursor: default;
|
||||
height: 32px;
|
||||
line-height: 36px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
|
||||
padding:0 1px;
|
||||
.prev_page_hide,
|
||||
.prev_page,
|
||||
.first_page,
|
||||
.first_page_hide {
|
||||
padding: 0 1px;
|
||||
height: 32px;
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
|
||||
.next_page_hide, .next_page, .last_page, .last_page_hide{
|
||||
padding:0 0px;
|
||||
.next_page_hide,
|
||||
.next_page,
|
||||
.last_page,
|
||||
.last_page_hide {
|
||||
padding: 0 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.first_page, .first_page_hide {
|
||||
.first_page,
|
||||
.first_page_hide {
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.last_page, .last_page_hide {
|
||||
.last_page,
|
||||
.last_page_hide {
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
@@ -614,7 +641,7 @@ body {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.7);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
}
|
||||
@@ -623,7 +650,7 @@ body {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
color: white;
|
||||
background: rgba(0,0,0,.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 1.5rem;
|
||||
padding: 10px;
|
||||
width: 60vw;
|
||||
@@ -634,7 +661,7 @@ body {
|
||||
display: none !important;
|
||||
}
|
||||
*/
|
||||
#wrapper{
|
||||
#wrapper {
|
||||
background: inherit;
|
||||
/*height: 94%;*/
|
||||
}
|
||||
@@ -645,44 +672,45 @@ display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 736px) and (max-width:500px), only screen and (max-device-width: 736px) and (orientation: landscape){
|
||||
#player-container{
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 200px;
|
||||
bottom: 0px;
|
||||
}
|
||||
#controls {
|
||||
width: 100vw;
|
||||
margin-top: 0px;
|
||||
}
|
||||
@media only screen and (max-width: 736px) and (max-width: 500px),
|
||||
only screen and (max-device-width: 736px) and (orientation: landscape) {
|
||||
#player-container {
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 200px;
|
||||
bottom: 0px;
|
||||
}
|
||||
#controls {
|
||||
width: 100vw;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#player {
|
||||
width: 100vw;
|
||||
height: 170px;
|
||||
display: block;
|
||||
}
|
||||
#player {
|
||||
width: 100vw;
|
||||
height: 170px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#player_overlay {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#player_overlay {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#playlist {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 208px);
|
||||
}
|
||||
#playlist {
|
||||
width: 100vw;
|
||||
height: calc(100vh - 208px);
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
min-width: 96%;
|
||||
bottom: auto;
|
||||
}
|
||||
#toast-container {
|
||||
min-width: 96%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
#song-title {
|
||||
width: 100vw;
|
||||
font-size: 1.2rem;
|
||||
top: calc(100vh - 200px);
|
||||
}
|
||||
#song-title {
|
||||
width: 100vw;
|
||||
font-size: 1.2rem;
|
||||
top: calc(100vh - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
4
server/public/assets/css/globals.css
Normal file
4
server/public/assets/css/globals.css
Normal file
@@ -0,0 +1,4 @@
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
840
server/public/assets/css/mobile.css
Normal file
840
server/public/assets/css/mobile.css
Normal file
@@ -0,0 +1,840 @@
|
||||
@media only screen and (max-width: 992px) {
|
||||
nav .brand-logo {
|
||||
left: 0%;
|
||||
transform: translateX(0%);
|
||||
-webkit-transform: translateX(0%);
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.zbrand {
|
||||
/*max-width: 35%;*/
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px),
|
||||
(min-width: 961px),
|
||||
(min-width: 1025px),
|
||||
(min-width: 1281px) {
|
||||
#controls {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 736px) and (max-width: 600px),
|
||||
only screen and (max-device-width: 736px) and (orientation: landscape) {
|
||||
.autocomplete-content.dropdown-content {
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.mobile-overflow {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.footer-buttons,
|
||||
.footer-buttons li a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main-row {
|
||||
margin-right: -3px !important;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.admin_panel {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
#suggestions {
|
||||
height: auto !important;
|
||||
/*padding-bottom: 0px;*/
|
||||
}
|
||||
|
||||
.margin-playbar {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#chat-container {
|
||||
height: calc(100vh - 48px - 64px - 120px);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
#player_bottom_overlay {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.mobile-delete {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
top: 0px;
|
||||
right: -60px;
|
||||
/* overflow: visible; */
|
||||
z-index: -99999999;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
/*padding-bottom: 20px;*/
|
||||
}
|
||||
|
||||
#fireplace_player {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.addedJoinBox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#playbar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.hamburger-sidenav {
|
||||
margin: 20px 10px 12px 10px;
|
||||
}
|
||||
|
||||
#main_section_frontpage {
|
||||
margin-top: -20px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.delete_button,
|
||||
.del_suggested,
|
||||
.del_user_suggested {
|
||||
bottom: -9px;
|
||||
/* line-height: inherit; */
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: none;
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.vote-container:hover .list-image:after,
|
||||
.add-suggested:hover .list-suggested-image:after {
|
||||
opacity: 1;
|
||||
content: "thumb_up";
|
||||
}
|
||||
|
||||
.list-image:after,
|
||||
.list-suggested-image:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.delete_button .material-icons,
|
||||
.del_suggested .material-icons,
|
||||
.del_user_suggested .material-icons {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
#remote-sidebar-buttons-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slider-vol-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#frontpage-viewer-counter {
|
||||
right: 56px;
|
||||
width: 62px;
|
||||
left: inherit;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
left: 0 !important;
|
||||
padding-left: 0px !important;
|
||||
-webkit-transform: translateX(0%) !important;
|
||||
-moz-transform: translateX(0%) !important;
|
||||
-ms-transform: translateX(0%) !important;
|
||||
-o-transform: translateX(0%) !important;
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
#player_overlay {
|
||||
height: calc(30vh);
|
||||
bottom: -33px !important;
|
||||
top: 7px;
|
||||
width: 100vw;
|
||||
height: 200px;
|
||||
pointer-events: all;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
.click-through {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.zicon {
|
||||
height: 100%;
|
||||
}
|
||||
/*.list-remove{
|
||||
margin-top:-68px;
|
||||
}*/
|
||||
|
||||
#settings-bar {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#remote-mobile-container {
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
#remote_channel {
|
||||
color: #2d2d2d;
|
||||
/*width:90%;*/
|
||||
}
|
||||
.show-only-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#volume-control-remote {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#remote_header {
|
||||
color: #2d2d2d;
|
||||
font-size: 1.5em;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#all_chat,
|
||||
#channelchat {
|
||||
height: calc(100vh - 352px);
|
||||
}
|
||||
|
||||
#fp-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#search-wrapper:hover,
|
||||
#song-title:hover {
|
||||
/*background: inherit;*/
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
left: 0% !important;
|
||||
width: 100vw;
|
||||
bottom: 55px;
|
||||
}
|
||||
|
||||
.empty-inner-results {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
#empty-results {
|
||||
height: calc(100vh - 112px);
|
||||
}
|
||||
|
||||
.search_input {
|
||||
padding-right: 50px;
|
||||
width: calc(100vw - 78px);
|
||||
}
|
||||
|
||||
.playlist-tabs-loggedIn,
|
||||
.playlist-tabs {
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
|
||||
#wrapper.tabs_height {
|
||||
height: calc(100vh - 48px - 64px - 134px);
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.client-wrapper {
|
||||
height: calc(100vh - 48px - 64px - 36px) !important;
|
||||
}
|
||||
|
||||
/*.client-results-height {
|
||||
margin-top: 50px !important;
|
||||
}*/
|
||||
|
||||
.client-pagination-height {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.brand-mobile {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
#player {
|
||||
height: calc(100%);
|
||||
display: none;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.pointer-events-all-mobile {
|
||||
pointer-events: all !important;
|
||||
}
|
||||
|
||||
.small-display {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.small-display-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-on-small-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#controls {
|
||||
/*opacity: 1;*/
|
||||
overflow: initial;
|
||||
background-color: rgb(70, 70, 70);
|
||||
height: 50px;
|
||||
margin-top: inherit;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
pointer-events: all;
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-o-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#chat-container {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#play,
|
||||
#pause,
|
||||
#volume-button i,
|
||||
#fullscreen i,
|
||||
.castButton-unactive i,
|
||||
.castButton-active i,
|
||||
.playbar-btn i {
|
||||
font-size: 31px;
|
||||
font-size: 31px !important;
|
||||
margin-top: 8px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.skip.playbar,
|
||||
.prev.playbar,
|
||||
#playpause {
|
||||
padding-top: 0px;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.castButton-unactive,
|
||||
.castButton-active {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
/*#volume{
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
.volume-container {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 37px;
|
||||
top: -127px;
|
||||
height: 127px;
|
||||
left: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.volume-container-cast {
|
||||
right: 39px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
width: 10px;
|
||||
height: 100px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
#viewers {
|
||||
margin-top: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#duration {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin-top: 9px;
|
||||
letter-spacing: -0.7px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#volume-button {
|
||||
float: right;
|
||||
/* margin-right: 5px; */
|
||||
padding-right: 3px;
|
||||
margin-left: 0px;
|
||||
padding-left: 3px;
|
||||
height: 51px;
|
||||
padding-top: 0px;
|
||||
width: 37px;
|
||||
}
|
||||
|
||||
#fullscreen {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.castButton {
|
||||
width: 39px;
|
||||
height: 51px;
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
.label-for-mobile-frontpage {
|
||||
display: initial;
|
||||
width: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mega {
|
||||
background: white;
|
||||
}
|
||||
#bar {
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.channel-finder .input-field {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.mega form {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mega input {
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
margin-left: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.room-namer.autocomplete {
|
||||
margin-left: 0px !important;
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
#channel-share-modal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#autocomplete-input {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #9e9e9e !important;
|
||||
}
|
||||
|
||||
#autocomplete-input::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #fff;
|
||||
}
|
||||
#autocomplete-input:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
#autocomplete-input::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
#autocomplete-input:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.room-namer::-webkit-input-placeholder {
|
||||
/*color:rgb(155, 155, 155) !important;*/
|
||||
-webkit-transition: opacity 0.5s;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
#mega-background,
|
||||
.mega h5,
|
||||
#snow,
|
||||
.pitch,
|
||||
.channel-finder .input-field .prefix,
|
||||
.listen-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.channel-finder .input-field {
|
||||
display: initial;
|
||||
/* width: 69%; */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/*.mega {display:none;}*/
|
||||
.mobile-search {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toast {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.remote-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-fixed,
|
||||
#nav {
|
||||
/*position: relative;*/
|
||||
}
|
||||
|
||||
.navbar-fixed {
|
||||
height: 100px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.control-list {
|
||||
position: absolute !important;
|
||||
/*width: 120px;*/
|
||||
}
|
||||
|
||||
.client-control-list {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
|
||||
.padding-bottom-novideo {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.padding-bottom-extra {
|
||||
padding-bottom: 210px;
|
||||
}
|
||||
|
||||
.main,
|
||||
#main-row,
|
||||
.video-container,
|
||||
#playlist {
|
||||
height: auto !important;
|
||||
margin-bottom: 2px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 99%;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
#pageButtons {
|
||||
margin-left: -11px;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
#search_loader {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
#playlist {
|
||||
/*margin-left: 10px;*/
|
||||
background: inherit;
|
||||
width: calc(100% - 10px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#player {
|
||||
pointer-events: none;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.search-container,
|
||||
.song-title {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.row .col.s12 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#main-row.row #video-container.video-container {
|
||||
position: fixed;
|
||||
display: block !important;
|
||||
width: 106vw !important;
|
||||
height: 200px !important;
|
||||
z-index: 10;
|
||||
bottom: 55px;
|
||||
}
|
||||
|
||||
#video-container.video-container.frontpage-player {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.chan {
|
||||
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42);
|
||||
width: calc(100vw - 170px) !important;
|
||||
max-width: calc(100% - 87.5px - 130px);
|
||||
font-size: 2rem;
|
||||
padding-right: 0px;
|
||||
overflow: hidden;
|
||||
/* display: block; */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chan-client {
|
||||
max-width: calc(100% - 87.5px - 170px);
|
||||
}
|
||||
|
||||
.control-list li a {
|
||||
min-width: 0px;
|
||||
width: 37px;
|
||||
padding: 0 0 0 0px;
|
||||
}
|
||||
|
||||
nav .zbrand {
|
||||
-webkit-transform: initial;
|
||||
transform: initial;
|
||||
display: flex;
|
||||
max-width: initial;
|
||||
width: 100vw;
|
||||
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
top: 56px !important;
|
||||
width: 100vw;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
.title-container li {
|
||||
/*width: 100%;*/
|
||||
}
|
||||
|
||||
#inner-results {
|
||||
height: calc(100vh - 54px - 64px - 123px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.thumb-and-info {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.result_info {
|
||||
opacity: 0.8;
|
||||
margin-top: 0px;
|
||||
height: 21px;
|
||||
margin-right: 0px;
|
||||
padding: 0px;
|
||||
line-height: initial;
|
||||
border-top-right-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 55px;
|
||||
margin-left: 10px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.search_results {
|
||||
margin-top: 45px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.results-tabs .indicator {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#results,
|
||||
#results_soundcloud {
|
||||
background-color: #000;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
#results {
|
||||
max-height: calc(100vh - 165px);
|
||||
}
|
||||
|
||||
#results_soundcloud {
|
||||
height: calc(100vh - 64px - 54px);
|
||||
}
|
||||
|
||||
#results_soundcloud #inner-results {
|
||||
height: calc(100vh - 54px - 64px - 47px);
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 0;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.result-get-more-info {
|
||||
background: black;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.result-info-no-buttons {
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
|
||||
.result-object {
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result {
|
||||
-webkit-transition: margin 0.5s;
|
||||
-moz-transition: margin 0.5s;
|
||||
transition: margin 0.5s;
|
||||
}
|
||||
|
||||
#user_password {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
#addToListInput {
|
||||
top: -85px;
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
#addToOtherList {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.result-object-slid {
|
||||
/*-webkit-transform: translateX(calc(-100% + 45px)) !important;
|
||||
transform: translateX(calc(-100% + 45px)) !important;*/
|
||||
margin-left: -94%;
|
||||
}
|
||||
|
||||
.result-start-end-container {
|
||||
/*visibility: hidden;
|
||||
pointer-events: none;*/
|
||||
margin-left: 120%;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.result-info-buttons {
|
||||
margin-top: 20px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.result .search-title {
|
||||
white-space: nowrap;
|
||||
width: calc(100vw - 165px);
|
||||
margin-top: -5px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.result img {
|
||||
margin: -3px 10px;
|
||||
height: 50px;
|
||||
width: 88.88px;
|
||||
}
|
||||
.result .add-many {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 736px) and (orientation: landscape) {
|
||||
.video-container {
|
||||
width: 315px !important;
|
||||
/* height: auto !important; */
|
||||
right: -5px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#results {
|
||||
background-color: #000;
|
||||
/*margin-top:56px;*/
|
||||
}
|
||||
|
||||
.title-container {
|
||||
top: 64px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) {
|
||||
.navbar-fixed {
|
||||
height: 64px;
|
||||
}
|
||||
nav .zbrand {
|
||||
/*display: inline-block;*/
|
||||
/*top:-22px;*/
|
||||
/*left:100px;*/
|
||||
}
|
||||
|
||||
.title-container li {
|
||||
/*width: 71%;*/
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
#playlist {
|
||||
/*padding:0px 15px;*/
|
||||
height: 90%;
|
||||
height: calc(100vh - 64px);
|
||||
overflow: hidden;
|
||||
padding-right: 0px;
|
||||
/*padding-right: 0px;*/
|
||||
/*padding:0px 0px 0px 0px;*/
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user