mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-26 14:58:00 +01:00
ca397f09fc
Mobile specific view. Basically Pony.fm desktop squashed into a mobile view
127 lines
2 KiB
Text
Vendored
127 lines
2 KiB
Text
Vendored
@media only screen and (max-width: 480px) {
|
|
html, body {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
body > header {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.site-content {
|
|
margin-left: 0px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.now-playing {
|
|
margin-left: 0px;
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
z-index: 1010;
|
|
box-shadow: 0 0 8px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.user-details {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.mobile-header {
|
|
display: block !important;
|
|
position: absolute;
|
|
z-index: 1001;
|
|
background: #84528A;
|
|
height: 64px;
|
|
width: 100%;
|
|
top: 0;
|
|
|
|
.logo {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 40px;
|
|
width: 160px;
|
|
padding-top: 16px;
|
|
|
|
> img {
|
|
max-height: 75%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
left: -170px;
|
|
transition: transform 0.5s ease;
|
|
transform: translateX(0px) translateZ(0);
|
|
perspective: 1000;
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
z-index: 1011;
|
|
height: ~"calc(100% - 64px)";
|
|
box-shadow: 0 8px 8px rgba(0,0,0,0.5);
|
|
|
|
> a {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sidebar.active {
|
|
transform: translateX(170px) translateZ(0);
|
|
}
|
|
|
|
.user-details > .avatar {
|
|
border: 0 !important;
|
|
box-shadow: initial !important;
|
|
background: transparent !important;
|
|
|
|
> img {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
> span {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.track-player {
|
|
margin-right: 0px !important;
|
|
.buttons {
|
|
li.volume, li.status {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input.search-input {
|
|
border: 0;
|
|
}
|
|
|
|
.dropdowns {
|
|
margin-bottom: 0px;
|
|
> li {
|
|
margin-bottom: 10px;
|
|
> .btn {
|
|
font-size: 10pt;
|
|
}
|
|
}
|
|
}
|
|
.details-columns {
|
|
.cboxElement {
|
|
display: none;
|
|
}
|
|
.right {
|
|
float: none;
|
|
padding: 0px;
|
|
width: auto;
|
|
}
|
|
.left {
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|