KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2026-01-25 02:45:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

More similar header on mobile

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2017-02-01 23:21:10 +01:00
parent 3b3a984689
commit 9a52e5f7dd
9 changed files with 143 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
public/css/style.css
View File

@@ -522,14 +522,13 @@ main {
}
nav .zbrand{
max-width: 22%;
min-width: 200px;
overflow: hidden;
position: relative;
font-size: 30px;
padding: 0 20px;
left: initial;
display: inline;
display: inline-flex;
}
.navbar-fixed {
@@ -646,7 +645,7 @@ hide mdi-action-visibility mdi-action-visibility-off
transition: padding 1s ease;
}
.mdi-navigation-close {
.mdi-navigation-close {
text-align:right !important;
}
@@ -1295,6 +1294,7 @@ ul #chat-log{
.chan{
padding-right:10px;
max-width:22vw;
text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42);
}
@@ -1722,7 +1722,7 @@ nav ul li:hover, nav ul li.active {
background: #dadada;
}
#volume-control-remote .ui-state-active {
#volume-control-remote .ui-state-active, #volume-control .ui-state-active {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1,1,1,0.15);
position: absolute;
width: 14px;
@@ -1779,6 +1779,20 @@ nav ul li:hover, nav ul li.active {
.show-only-mobile{display:none;
}
@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 only screen and (max-width: 736px) and (max-width:600px), only screen and (max-device-width: 736px) and (orientation: landscape){
#playbar{
display:block;
@@ -1793,7 +1807,7 @@ nav ul li:hover, nav ul li.active {
text-align: center;
}
.slider-vol{
.slider-vol-mobile{
display:none !important;
}
@@ -1806,6 +1820,7 @@ nav ul li:hover, nav ul li.active {
.brand-logo{
left: 0 !important;
padding-left: 0px !important;
-webkit-transform: translateX(0%) !important;
-moz-transform: translateX(0%) !important;
-ms-transform: translateX(0%) !important;
@@ -1979,6 +1994,8 @@ nav ul li:hover, nav ul li.active {
.chan {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.42);
width: calc(100vw - 170px);
max-width: 100%;
}
.control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 0px;}
@@ -1986,10 +2003,9 @@ nav ul li:hover, nav ul li.active {
nav .zbrand{
-webkit-transform:initial;
transform: initial;
display: block;
display: flex;
max-width: initial;
width: 70%;
width: calc(100% - 100px);
width: calc(100vw - 170px);
}
#search_loader{
@@ -2000,6 +2016,7 @@ nav ul li:hover, nav ul li.active {
.title-container{
background-color: rgba(0,0,0,0.1);
display: inline-block;
top:56px !important;
}
.title-container li {
width: 100%;
@@ -2041,6 +2058,10 @@ nav ul li:hover, nav ul li.active {
margin-top:56px;
}
.title-container{
top:64px;
}
}
@media only screen and (min-width: 769px){
@@ -2051,7 +2072,7 @@ nav ul li:hover, nav ul li.active {
}
nav .zbrand {
/*display: inline-block;*/
top:-22px;
/*top:-22px;*/
/*left:100px;*/
}
.title-container{
@@ -2123,6 +2144,7 @@ nav ul li:hover, nav ul li.active {
color: black;
text-align: center;
}
#volume-control, #volume-control-remote {
cursor:pointer;
float:left;
@@ -2137,7 +2159,7 @@ nav ul li:hover, nav ul li.active {
border-radius: 2px;
}
#volume-control .ui-slider-range-min, , #volume-control-remote .ui-slider-range-min{
#volume-control .ui-slider-handle, , #volume-control-remote .ui-slider-range-min{
height:5px;
width: 75px;
position: absolute;
@@ -2147,7 +2169,7 @@ nav ul li:hover, nav ul li.active {
border-radius: 2px;
}
#volume-control .ui-slider-handle, #volume-control-remote .ui-slider-range-min {
#volume-control .ui-slider-range-min, #volume-control-remote .ui-slider-range-min {
height: 15px;
width: 36px;
background: rgb(255, 44, 44);
@@ -2160,6 +2182,58 @@ nav ul li:hover, nav ul li.active {
margin-top:0px;
}
.volume-elements{
display:flex;
}
#volume-control {
float: none;
/*width: 90%;*/
margin: auto;
margin-left: 10px;
margin-right: 0;
margin-top: 30px;
height: 5px;
border-radius: 4px;
margin-bottom: 20px;
cursor: pointer;
float: left;
position: relative;
background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
border: none;
outline: none;
}
#volume-control .ui-slider-range-min {
margin-left: 0px;
height: 5px;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
border: none;
outline: none;
}
#volume-control .ui-slider-handle {
margin-left: -12.5px !important;
width: 40px;
margin-top: -3px;
background: #2d2d2d;
border: none;
height: 20px;
padding: 0;
border: 1px solid white;
width: 20px;
background: #000 50% 50% repeat-x;
position: absolute;
cursor: pointer;
outline: none;
margin-left: -7.5px;
border-radius: 1000px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
#volume-control-remote{
float: none;
width: 70%;
@@ -2167,7 +2241,7 @@ nav ul li:hover, nav ul li.active {
margin-left: 10px;
margin-right: 0;
margin-top: 30px;
height: 10px;
height: 5px;
border-radius: 4px;
margin-bottom: 20px;
cursor: pointer;
@@ -2189,7 +2263,7 @@ nav ul li:hover, nav ul li.active {
/* margin-top: 0px; */
/* height:10px; */
/* background: black; */
height: 10px;
height: 5px;
/* width: 75px; */
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
@@ -2206,10 +2280,10 @@ nav ul li:hover, nav ul li.active {
/* display: none; */
/* height: 14px; */
/* width: 10px; */
height: 25px;
height: 20px;
padding: 0;
border: 1px solid white;
width: 25px;
width: 20px;
background: #000 50% 50% repeat-x;
position: absolute;
cursor: pointer;
@@ -2221,12 +2295,17 @@ nav ul li:hover, nav ul li.active {
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.slider-vol{
.slider-vol, .slider-vol-mobile{
float: right;
color: black;
font-size: 22px;
margin-right: 20px;
margin-top: 6px;
padding-left: 35px;
margin-top: 22px;
}
.slider-vol-mobile{
margin-top:5px;
}
.about-remote{