KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile styling, some toasts, more colors, now uses minified versions

Browse Source
This commit is contained in:
Nicolas A. Tonne
2015-04-30 21:46:26 +02:00
parent 291f6bfdc6
commit 97faaa922b
8 changed files with 101 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
static/css/style.css
View File

@@ -76,48 +76,10 @@ left: initial;
display: inline;
}
.title-container{
position: absolute;
margin-top: 64px;
width: 99%;
left: 0;
}
.navbar-fixed {
height: 128px;
}
@media only screen and (max-width: 600px){
.navbar-fixed, #nav, .control-list{
position: relative !important;
}
}
@media only screen and (min-width: 992px){
.navbar-fixed {
height: 64px;
}
nav .zbrand {
display: inline-block;
}
.title-container{
position: initial;
margin-top: initial;
width: 65%;
width: calc(90% - 256px - 130px);
left: initial;
}
.title-container li {
width: 84%;
}
#playlist{
padding:0px 15px;
overflow: hidden;
height: 90%;
height: calc(100% - 64px);
}
}
.fullwidth{
width:100%;
}
@@ -251,16 +213,19 @@ hide mdi-action-visibility mdi-action-visibility-off
}
.title-container{
padding-left: 30px;
display: inline-block;
height: 100%;
position: absolute;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
left: 0;
}
.title-container li{
height: 64px;
height:100%;
padding: 0 15px;
width: 100%;
}
.search-container{
@@ -375,7 +340,7 @@ hide mdi-action-visibility mdi-action-visibility-off
}
.add-many i{ line-height: 36px !important;}
#results{
background-color: rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.8);
margin-top: -27px;
max-height: 600px;
overflow: overlay;
@@ -579,7 +544,86 @@ hide mdi-action-visibility mdi-action-visibility-off
{
height:100%;
background-color:rgba(0,0,0,0.5);
/*-webkit-transition: width 1s ease;
transition: width 1s ease;*/
}
/***************************************************************************
****************************************************************************
********************* Screen size specific rules ***************************
****************************************************************************
***************************************************************************/
@media only screen and (max-width: 600px){
.navbar-fixed, #nav{
position: relative;
}
.control-list{
position: absolute !important;
width: 120px;
}
.control-list li a{ min-width: 0px; width: 37px; padding: 0 0 0 5px;}
nav .zbrand{
-webkit-transform:initial;
transform: initial;
display: block;
max-width: initial;
width: 70%;
width: calc(100% - 100px);
}
.title-container{
background-color: rgba(0,0,0,0.1);
display: inline-block;
}
.title-container li {
width: 100%;
}
#results{
background-color: #000;
margin-top:56px;
}
.result{
margin: 0;
width: 99%;
}
.result .search-title{
white-space: nowrap;
}
.result img {
margin: 25px 10px;
height: 50px;
}
.result .add-many{
margin-top: 15px;
}
}
@media only screen and (min-width: 992px){
.navbar-fixed {
height: 64px;
}
nav .zbrand {
display: inline-block;
}
.title-container{
position: initial;
display: inline-block;
margin-top: initial;
width: 65%;
width: calc(90% - 256px - 130px);
left: initial;
}
.title-container li {
width: 84%;
}
#playlist{
padding:0px 15px;
overflow: hidden;
height: 90%;
height: calc(100% - 64px);
}
}