mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-28 15:47:59 +01:00
Much design work
This commit is contained in:
nelsonlaquet
parent
c148919345
commit
f4e6e87213
22 changed files with 637 additions and 1825 deletions
|
|
@ -1,13 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en-US">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h2>Password Reset</h2>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
To reset your password, complete this form: {{ URL::to('password/reset', array($token)) }}.
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -2,27 +2,28 @@
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<a href="/">Pony.fm</a>
|
||||||
<h1><a href="/">Pony.fm</a></h1>
|
|
||||||
<div class="now-playing">
|
<div class="now-playing">
|
||||||
<pfm-player></pfm-player>
|
<pfm-player></pfm-player>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="site-body">
|
<div class="site-body">
|
||||||
<section class="sidebar" ng-controller="sidebar">
|
<ul class="sidebar" ng-controller="sidebar">
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
@if (Auth::check())
|
@if (Auth::check())
|
||||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard</a></li>
|
<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
|
||||||
@else
|
@else
|
||||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Home</a></li>
|
<li ng-class="{selected: $state.includes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
|
||||||
@endif
|
@endif
|
||||||
<li><h3>Discover</h3></li>
|
<li ng-class="{selected: $state.includes('tracks') || $state.includes('track') || $state.includes('albums') || $state.includes('album') || $state.includes('artists') || $state.includes('artist')}">
|
||||||
<li ng-class="{selected: $state.includes('tracks') || $state.includes('track')}"><a href="/tracks">Music <i class="icon-music"></i></a></li>
|
<a href="/tracks">Discover <i class="icon-music"></i></a>
|
||||||
<li ng-class="{selected: $state.includes('albums') || $state.includes('album')}"><a href="/albums">Albums <i class="icon-th-list"></i></a></li>
|
</li>
|
||||||
<li ng-class="{selected: $state.includes('artists') || $state.includes('artist')}"><a href="/artists">Artists <i class="icon-user"></i></a></li>
|
|
||||||
|
@if (Auth::check())
|
||||||
|
<li ng-class="{selected: $state.includes('account-content') || isActive('/account')}"><a href="/account/tracks">Account <i class="icon-user"></i></a></li>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<li ng-class="{selected: isActive('/about')}"><a href="/about">Meta <i class="icon-info"></i></a></li>
|
||||||
|
|
||||||
@if (Auth::check())
|
@if (Auth::check())
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -43,34 +44,8 @@
|
||||||
<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
|
<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
|
||||||
<h3>
|
|
||||||
<a href="#" title="Upload Track"><i class="icon-upload"></i></a>
|
|
||||||
Account
|
|
||||||
</h3>
|
|
||||||
</li>
|
|
||||||
{{-- <li ng-class="{selected: $state.includes('account-favourites')}"><a href="/account/favourites">Favourites</a></li> --}}
|
|
||||||
<li ng-class="{selected: $state.includes('account-content')}"><a href="/account/tracks">Your Content</a></li>
|
|
||||||
<li ng-class="{selected: isActive('/account')}"><a href="/account">Settings</a></li>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<li><h3>Meta</h3></li>
|
|
||||||
|
|
||||||
@if (!Auth::check())
|
|
||||||
<li ng-class="{selected: isActive('/login')}"><a href="/login">Login</a></li>
|
|
||||||
{{-- <li ng-class="{selected: isActive('/register')}"><a href="/register">Register</a></li> --}}
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<li ng-class="{selected: isActive('/about')}"><a href="/about">About</a></li>
|
|
||||||
<li ng-class="{selected: isActive('/faq')}"><a href="/faq">FAQ</a></li>
|
|
||||||
|
|
||||||
@if (Auth::check())
|
|
||||||
<li><a href="#" ng-click="logout()" pfm-eat-click>Logout</a></li>
|
|
||||||
@endif
|
@endif
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
<ui-view class="site-content">
|
<ui-view class="site-content">
|
||||||
@yield('app_content')
|
@yield('app_content')
|
||||||
</ui-view>
|
</ui-view>
|
||||||
|
|
@ -86,17 +61,7 @@
|
||||||
|
|
||||||
@section('scripts')
|
@section('scripts')
|
||||||
|
|
||||||
<div id="fb-root"></div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function(d, s, id) {
|
|
||||||
var js, fjs = d.getElementsByTagName(s)[0];
|
|
||||||
if (d.getElementById(id)) return;
|
|
||||||
js = d.createElement(s); js.id = id;
|
|
||||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=186765381447538";
|
|
||||||
fjs.parentNode.insertBefore(js, fjs);
|
|
||||||
}(document, 'script', 'facebook-jssdk'));
|
|
||||||
|
|
||||||
window.pfm = {
|
window.pfm = {
|
||||||
token: "{{Session::token()}}",
|
token: "{{Session::token()}}",
|
||||||
auth: {
|
auth: {
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,6 @@
|
||||||
@yield('styles')
|
@yield('styles')
|
||||||
</head>
|
</head>
|
||||||
<body ng-app="ponyfm" ng-controller="application" uploader>
|
<body ng-app="ponyfm" ng-controller="application" uploader>
|
||||||
<div class="background-color"></div>
|
|
||||||
<div class="background-two"></div>
|
|
||||||
<div class="background-one"></div>
|
|
||||||
@yield('content')
|
@yield('content')
|
||||||
@yield('scripts')
|
@yield('scripts')
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
BIN
public/images/poniverse-logo.png
Normal file
BIN
public/images/poniverse-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,11 +1,11 @@
|
||||||
window.handleResize = () ->
|
window.handleResize = () ->
|
||||||
windowHeight = $(window).height()
|
windowHeight = $(window).height()
|
||||||
$siteBody = $ '.site-body'
|
$siteBody = $ '.site-body'
|
||||||
$siteBody.height windowHeight - $('header').height() - 1
|
$siteBody.height windowHeight - $('header').height()
|
||||||
|
|
||||||
$('.stretch-to-bottom').each () ->
|
$('.stretch-to-bottom').each () ->
|
||||||
$this = $ this
|
$this = $ this
|
||||||
newHeight = windowHeight - $this.offset().top + 1
|
newHeight = windowHeight - $this.offset().top
|
||||||
if newHeight > 0
|
if newHeight > 0
|
||||||
$this.height newHeight
|
$this.height newHeight
|
||||||
|
|
||||||
|
|
@ -16,11 +16,6 @@ window.handleResize = () ->
|
||||||
$this.css
|
$this.css
|
||||||
height: '15em'
|
height: '15em'
|
||||||
|
|
||||||
# if $this.height() > $this.data 'real-height'
|
|
||||||
# $this.css {height: 'auto'}
|
|
||||||
# $this.find('.reveal').css {display: 'none'}
|
|
||||||
# return
|
|
||||||
|
|
||||||
$this.find('.reveal').click (e) ->
|
$this.find('.reveal').click (e) ->
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
$this.css {height: 'auto'}
|
$this.css {height: 'auto'}
|
||||||
|
|
|
||||||
|
|
@ -1,436 +1,2 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
@import-once 'mixins';
|
@import-once 'mixins';
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
html {
|
|
||||||
.license-grid {
|
|
||||||
li {
|
|
||||||
width: 50%;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
margin: 5px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-settings-form {
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.playlists {
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px 5px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
height: 40px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-right: 1px solid #ddd;
|
|
||||||
padding: 0px;
|
|
||||||
display: block;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
float: right;
|
|
||||||
display: block;
|
|
||||||
margin-top: 7px;
|
|
||||||
margin-right: 7px;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.main {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #444;
|
|
||||||
|
|
||||||
.is-public {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
.ellipsis();
|
|
||||||
margin-left: 50px;
|
|
||||||
line-height: 40px;
|
|
||||||
height: 40px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-selector {
|
|
||||||
width: 500px;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0px;
|
|
||||||
float: left;
|
|
||||||
width: 20%;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
.transition(all 400ms);
|
|
||||||
display: block;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
img {
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
.two-pane-view.closed {
|
|
||||||
.account-albums-listing {
|
|
||||||
li {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
width: 20%;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
.img-polaroid();
|
|
||||||
position: relative;
|
|
||||||
left: -5px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0px;
|
|
||||||
font-size: 12pt;
|
|
||||||
padding: 0px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.published {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-tracks-listing, .account-albums-listing {
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
&.empty {
|
|
||||||
.alert();
|
|
||||||
float: none !important;
|
|
||||||
width: auto !important;
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-not-published a {
|
|
||||||
background: fadeout(@yellow, 90%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected, &.selected:hover {
|
|
||||||
a {
|
|
||||||
#gradient>.vertical(#149bdf, #0480be);
|
|
||||||
cursor: default;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.published {
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
.transition(350px ease-out all);
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 9pt;
|
|
||||||
font-weight: normal;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
float: left;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
.ellipsis();
|
|
||||||
display: block;
|
|
||||||
margin-left: 37px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.published {
|
|
||||||
display: block;
|
|
||||||
color: #777;
|
|
||||||
margin-left: 37px;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #ddd;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.two-pane-view {
|
|
||||||
.list {
|
|
||||||
.dropdowns {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
.album-track-listing {
|
|
||||||
padding: 0px;
|
|
||||||
clear: both;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 10px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: normal;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
font-size: 8pt;
|
|
||||||
border-bottom: 1px dashed #ddd;
|
|
||||||
|
|
||||||
div {
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
line-height: normal;
|
|
||||||
padding: 2px 5px;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ui-sortable-helper {
|
|
||||||
#gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ui-sortable-placeholder {
|
|
||||||
background: @yellow;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-songs, .album {
|
|
||||||
.btn {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-songs, .album, .track-selector {
|
|
||||||
.btn {
|
|
||||||
.border-radius(0px);
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: 8pt;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pfm-popup {
|
|
||||||
width: 300px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
.ellipsis();
|
|
||||||
display: block;
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: 8pt;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
#gradient>.vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
|
||||||
text-decoration: none;
|
|
||||||
color: @dropdownLinkColorHover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
a {
|
|
||||||
#gradient>.vertical(@green, darken(@green, 5%));
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
#gradient>.vertical(fadeout(@green, 20%), fadeout(darken(@green, 5%), 20%));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.closed {
|
|
||||||
.account-tracks-listing, .account-albums-listing {
|
|
||||||
.clearfix();
|
|
||||||
|
|
||||||
li {
|
|
||||||
float: left;
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
&.empty {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open {
|
|
||||||
.list {
|
|
||||||
.box-shadow(2px 0px 2px rgba(0, 0, 0, 0.2));
|
|
||||||
|
|
||||||
width: 250px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
margin-left: 260px;
|
|
||||||
margin-right: 10px;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.stretch-to-bottom {
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.license-grid {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
float: left;
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
margin: 0px 5px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 9pt;
|
|
||||||
display: block;
|
|
||||||
margin: 0px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding: 0px;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
min-height: 120px;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
.border-radius(0px);
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
> div {
|
|
||||||
cursor: default;
|
|
||||||
border-color: @blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover > div {
|
|
||||||
border: 1px solid #3366CC;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child > div {
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child > div {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
|
||||||
@import-once 'mixins';
|
|
||||||
|
|
||||||
.albums-listing, .artist-listing {
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
width: 20%;
|
|
||||||
|
|
||||||
float: left;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
&.empty {
|
|
||||||
.alert();
|
|
||||||
.border-radius(0px);
|
|
||||||
float: none !important;
|
|
||||||
width: auto !important;
|
|
||||||
display: block;
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-not-published a {
|
|
||||||
background: fadeout(@yellow, 90%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected, &.selected:hover {
|
|
||||||
a {
|
|
||||||
#gradient>.vertical(#149bdf, #0480be);
|
|
||||||
cursor: default;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.published {
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
.transition(350px ease-out all);
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
margin: 0px;
|
|
||||||
font-size: 9pt;
|
|
||||||
font-weight: normal;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0px;
|
|
||||||
font-size: 12pt;
|
|
||||||
padding: 0px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.published {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
.img-polaroid();
|
|
||||||
float: left;
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
left: -5px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
.ellipsis();
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.published {
|
|
||||||
display: block;
|
|
||||||
color: #777;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #ddd;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,26 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
@import-once 'mixins';
|
@import-once 'mixins';
|
||||||
|
|
||||||
|
.fade-hide, .fade-show {
|
||||||
|
.transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-hide {
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-hide.fade-hide-active {
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-show {
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-show.fade-show-active {
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
|
||||||
.slide-down-enter, .slide-down-leave,
|
.slide-down-enter, .slide-down-leave,
|
||||||
.slide-up-enter, .slide-up-leave,
|
.slide-up-enter, .slide-up-leave,
|
||||||
.slide-right-enter, .slide-right-leave {
|
.slide-right-enter, .slide-right-leave {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,14 @@
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
|
||||||
|
|
||||||
@import 'base/bootstrap/bootstrap';
|
@import 'base/bootstrap/bootstrap';
|
||||||
@import 'base/font-awesome/font-awesome';
|
@import 'base/font-awesome/font-awesome';
|
||||||
|
@import 'variables';
|
||||||
@import 'mixins';
|
@import 'mixins';
|
||||||
@import 'layout';
|
@import 'layout';
|
||||||
@import 'home';
|
|
||||||
@import 'account-content';
|
@import 'account-content';
|
||||||
@import 'components';
|
@import 'components';
|
||||||
@import 'forms';
|
@import 'forms';
|
||||||
@import 'tracks';
|
|
||||||
@import 'albums';
|
|
||||||
@import 'animations';
|
@import 'animations';
|
||||||
|
@import 'body';
|
||||||
|
@import 'player';
|
||||||
|
@import 'tracks';
|
||||||
27
public/styles/body.less
Normal file
27
public/styles/body.less
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
@import-once 'variables';
|
||||||
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
|
|
||||||
|
.site-content{
|
||||||
|
.box-sizing(border-box);
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 15pt;
|
||||||
|
color: @pfm-purple;
|
||||||
|
line-height: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #555;
|
||||||
|
float: right;
|
||||||
|
font-size: 10pt;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,27 +1,159 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
@import-once 'mixins';
|
@import-once 'mixins';
|
||||||
|
@import-once 'variables';
|
||||||
|
|
||||||
.fade-hide, .fade-show {
|
.stretch-to-bottom {
|
||||||
.transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-hide {
|
.dropdowns {
|
||||||
opacity:1;
|
.clearfix();
|
||||||
|
list-style: none;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
float: left;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 10px;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
> .btn {
|
||||||
|
background: @pfm-purple;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
.box-shadow(none);
|
||||||
|
|
||||||
|
margin: 0px;
|
||||||
|
border: 2px solid @pfm-purple;
|
||||||
|
|
||||||
|
li.selected {
|
||||||
|
a {
|
||||||
|
background: @pfm-purple;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a:hover {
|
||||||
|
background: lighten(@pfm-purple, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn {
|
||||||
|
border: none;
|
||||||
|
background: #eee;
|
||||||
|
font-size: 8pt;
|
||||||
|
padding: 3px 7px;
|
||||||
|
text-shadow: none;
|
||||||
|
|
||||||
|
&.btn-info {
|
||||||
|
background: @pfm-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-hide.fade-hide-active {
|
.tabs {
|
||||||
opacity:0;
|
.clearfix();
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 4px solid #ddd;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0px;
|
||||||
|
float: left;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 5px 13px;
|
||||||
|
display: block;
|
||||||
|
color: #555;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
a {
|
||||||
|
background: #eee;
|
||||||
|
color: #000;
|
||||||
|
border-bottom: 4px solid @pfm-purple;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-show {
|
ui-view {
|
||||||
opacity:0;
|
display: block;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.transition(opacity 250ms);
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
background: #fff;
|
||||||
|
content: ' ';
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 999;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
opacity: .8;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-show.fade-show-active {
|
.toolbar {
|
||||||
opacity:1;
|
#gradient>.vertical(#555, #222);
|
||||||
|
list-style: none;
|
||||||
|
margin: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
a, button {
|
||||||
|
.border-radius(0px);
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.delete {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html body {
|
html body {
|
||||||
|
.btn {
|
||||||
|
.border-radius(0px);
|
||||||
|
}
|
||||||
|
|
||||||
.ui-datepicker {
|
.ui-datepicker {
|
||||||
.border-radius(0px);
|
.border-radius(0px);
|
||||||
|
|
||||||
|
|
@ -34,9 +166,11 @@ html body {
|
||||||
border-bottom: 1px solid #777;
|
border-bottom: 1px solid #777;
|
||||||
margin: -3px;
|
margin: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-datepicker-calendar {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
.border-radius(0px);
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,48 +207,6 @@ html .dropdown-menu {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdowns {
|
|
||||||
.clearfix();
|
|
||||||
|
|
||||||
list-style: none;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 10px 0px;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
margin: 0px;
|
|
||||||
margin-right: 5px;
|
|
||||||
padding: 0px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
> a {
|
|
||||||
.border-radius(0px);
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
.border-radius(0px);
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
li.selected {
|
|
||||||
a {
|
|
||||||
background: @blue;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: fadeout(@blue, 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 3px 10px;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pfm-popup {
|
.pfm-popup {
|
||||||
.box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
|
.box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
@ -184,10 +276,6 @@ html .dropdown-menu {
|
||||||
form {
|
form {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
|
@ -200,8 +288,9 @@ html {
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
border: none;
|
border: none;
|
||||||
background: #ddd;
|
background: #eee;
|
||||||
margin: 5px 0px;
|
margin: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
@ -225,11 +314,12 @@ html {
|
||||||
padding: 1px 10px;
|
padding: 1px 10px;
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
|
color: @pfm-purple;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li.active a {
|
li.active a {
|
||||||
background: #444;
|
background: @pfm-purple;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
.pfm-form, .editor {
|
@import-once "base/bootstrap/bootstrap";
|
||||||
.form-row {
|
|
||||||
|
.form-row {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|
@ -15,9 +16,9 @@
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-error {
|
.has-error {
|
||||||
label {
|
label {
|
||||||
color: @red;
|
color: @red;
|
||||||
}
|
}
|
||||||
|
|
@ -25,47 +26,20 @@
|
||||||
.error {
|
.error {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
label.strong {
|
||||||
.border-radius(0px);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
#gradient>.vertical(#555, #222);
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
li {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
a, button {
|
|
||||||
.border-radius(0px);
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.delete {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label.strong {
|
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], input[type="password"], input[type="date"], textarea {
|
input[type="text"], input[type="password"], input[type="date"], textarea {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: #9c9c9c #9c9c9c #ccc #ccc;
|
border-color: #9c9c9c #9c9c9c #ccc #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"], input[type="password"], input[type="date"], textarea, select {
|
input[type="text"], input[type="password"], input[type="date"], textarea, select {
|
||||||
.border-radius(0px);
|
.border-radius(0px);
|
||||||
.box-sizing(border-box);
|
.box-sizing(border-box);
|
||||||
|
|
||||||
|
|
@ -76,23 +50,22 @@
|
||||||
&:focus {
|
&:focus {
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
height: auto;
|
height: auto;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.home-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,697 +1,144 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
@import-once 'mixins';
|
@import-once 'mixins';
|
||||||
|
@import-once 'variables';
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html body {
|
html body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
background: @pfm-dark-grey;
|
||||||
background: url('http://mlpforums.com/public/style_images/mlp/bg1.png');
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-color {
|
header, .site-body {
|
||||||
background: rgba(42, 42, 42, 1);
|
.box-shadow(0 0 7px rgba(0, 0, 0, .3));
|
||||||
position: fixed;
|
max-width: 1200px;
|
||||||
left: 0px;
|
margin: auto;
|
||||||
top: 0px;
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
ui-view {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
.transition(opacity 250ms);
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
background: #fff;
|
|
||||||
content: ' ';
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 999;
|
|
||||||
width: 0px;
|
|
||||||
height: 0px;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
opacity: .8;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
.clearfix();
|
> a {
|
||||||
.box-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
|
display: block;
|
||||||
background: #222;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 14pt;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px 10px;
|
|
||||||
line-height: 47px;
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 130px;
|
width: (@pfm-sidebar-size - 25);
|
||||||
|
height: 64px;
|
||||||
a {
|
line-height: 52px;
|
||||||
text-decoration: none;
|
background: @pfm-purple;
|
||||||
color: rgba(255, 255, 255, .6);
|
color: #fff;
|
||||||
|
font-size: 24pt;
|
||||||
|
padding-left: 25px;
|
||||||
|
font-weight: lighter;
|
||||||
|
position: relative;
|
||||||
|
z-index: 600;
|
||||||
|
font-family: 'Josefin Sans', sans-serif;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #aaa;
|
background: darken(@pfm-purple, 25%);
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.now-playing {
|
|
||||||
.clearfix();
|
|
||||||
margin-top: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
margin-left: 149px;
|
|
||||||
background: #222;
|
|
||||||
|
|
||||||
.current-track {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
float: left;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: #aaa;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.transport {
|
|
||||||
margin-top: -3px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
margin-left: 46px;
|
|
||||||
height: 5px;
|
|
||||||
background: #555;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar, .loader-bar {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader-bar {
|
|
||||||
background: #888;
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
background: #fd8500;
|
|
||||||
z-index: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-left: 45px;
|
|
||||||
|
|
||||||
.artist, .song {
|
|
||||||
.ellipsis();
|
|
||||||
display: block;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #3587CC;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.artist a {
|
|
||||||
color: #ddd;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.song a {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
float: right;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-right: 5px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
float: left;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-slider {
|
|
||||||
.box-shadow(0px 5px 9px rgba(50, 50, 50, 0.5));
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
border-bottom: 1px solid #fff;
|
|
||||||
border-top: 3px solid #3366CC;
|
|
||||||
top: 30px;
|
|
||||||
background: #eee;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0px;
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 0px;
|
|
||||||
z-index: 300;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
width: 5px;
|
|
||||||
height: 180px;
|
|
||||||
background: #aaa;
|
|
||||||
margin: auto;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.knob {
|
|
||||||
.border-radius(20px);
|
|
||||||
height: 15px;
|
|
||||||
width: 15px;
|
|
||||||
display: block;
|
|
||||||
background: #1F3D7B;
|
|
||||||
border: 2px solid #1F3D7B;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: -7px;
|
|
||||||
font-size: 1px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &.keep-open {
|
|
||||||
#gradient>.vertical(#fff, #ddd);
|
|
||||||
|
|
||||||
.volume-slider {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
.navigation-list-horiz();
|
|
||||||
float: left;
|
|
||||||
margin-top: 19px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
padding: 0px 20px;
|
|
||||||
color: #ddd;
|
|
||||||
z-index: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.not-selectable();
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
#gradient>.vertical(#fff, #ddd);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
.transition(250ms top ease-out);
|
|
||||||
#gradient>.vertical(#5b9fdc, #1f79c2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after, &:before {
|
|
||||||
position: absolute;
|
|
||||||
top: -100%;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
content: " ";
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.selected, li.selected:hover {
|
|
||||||
a {
|
|
||||||
cursor: default;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #000;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-body {
|
.now-playing {
|
||||||
max-width: 1200px;
|
margin-left: @pfm-sidebar-size;
|
||||||
margin: auto;
|
height: 64px;
|
||||||
|
background: #eee;
|
||||||
.sidebar {
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
width: 148px;
|
|
||||||
z-index: 2000;
|
|
||||||
|
|
||||||
nav {
|
|
||||||
h3 {
|
|
||||||
color: rgba(255, 255, 255, .6);
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 5px;
|
|
||||||
background: #222;
|
|
||||||
line-height: normal;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: @pfm-sidebar-size;
|
||||||
|
height: 100%;
|
||||||
|
background: @pfm-light-grey;
|
||||||
|
float: left;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 10pt;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
padding: 10px 25px;
|
||||||
|
padding-right: 10px;
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #eee;
|
||||||
|
background: darken(@pfm-light-grey, 10%);
|
||||||
|
line-height: normal;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
.not-selectable();
|
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
float: right;
|
||||||
right: 0px;
|
width: 20px;
|
||||||
top: 0px;
|
|
||||||
padding: 5px;
|
|
||||||
line-height: normal;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 12px;
|
|
||||||
width: 22px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(255, 255, 255, .7);
|
color: #fff;
|
||||||
|
|
||||||
&.selected, &.selected:hover {
|
|
||||||
color: @blue;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
text-decoration: none;
|
||||||
}
|
color: #000;
|
||||||
|
|
||||||
&.view-all {
|
|
||||||
right: 22px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> ul {
|
.dropdown-menu a {
|
||||||
margin: 0px;
|
color: #000;
|
||||||
padding: 0px;
|
}
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
> li {
|
&:hover > a.dropdown-toggle {
|
||||||
margin: 0px;
|
display: block;
|
||||||
padding: 0px;
|
}
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
.dropdown-menu {
|
> a.dropdown-toggle {
|
||||||
width: 148px;
|
float: right;
|
||||||
min-width: 148px;
|
padding: 10px 0px;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
.border-radius(0px);
|
|
||||||
.not-selectable();
|
|
||||||
.ellipsis();
|
|
||||||
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 0px;
|
|
||||||
border: none;
|
|
||||||
color: rgba(255, 255, 255, .7);
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 8px 5px;
|
|
||||||
line-height: normal;
|
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
padding: 10px 25px;
|
||||||
|
padding-right: 0px;
|
||||||
i {
|
|
||||||
float: right;
|
|
||||||
width: 22px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.menu {
|
|
||||||
float: right;
|
|
||||||
font-size: 15px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
> a.menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected, &.selected:hover {
|
|
||||||
> a:not(.menu) {
|
|
||||||
color: @blue;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.none {
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
padding: 8px 12px;
|
|
||||||
color: #555;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-content {
|
|
||||||
.perspective();
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 5px solid #222;
|
color: #fff;
|
||||||
border-top: none;
|
|
||||||
border-bottom: none;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
height: 100%;
|
> i {
|
||||||
margin-left: 148px;
|
display: block;
|
||||||
|
float: right;
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
> div {
|
&:hover {
|
||||||
.box-sizing(border-box);
|
text-decoration: none;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
padding: 0px 15px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.inner-view {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-content {
|
.site-content {
|
||||||
h1, h2 {
|
overflow: hidden;
|
||||||
border: none;
|
margin-left: @pfm-sidebar-size;
|
||||||
background: none;
|
background: #fff;
|
||||||
color: #747474;
|
height: 100%;
|
||||||
font-weight: 300;
|
z-index: 100;
|
||||||
line-height: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px 0px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
font-size: 10pt;
|
|
||||||
margin-top: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 10pt;
|
|
||||||
display: block;
|
|
||||||
padding: 3px 0px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
float: none;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 20px;
|
|
||||||
border-bottom: 2px solid #ddd;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
.tabs {
|
|
||||||
.clearfix();
|
|
||||||
list-style: none;
|
|
||||||
border-bottom: 4px solid #ddd;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
color: #747474;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 5px 10px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
a {
|
|
||||||
color: #000;
|
|
||||||
border-bottom: 4px solid orange;
|
|
||||||
margin-bottom: -4px;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-over-notice {
|
.file-over-notice {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, .8);
|
|
||||||
color: #fff;
|
|
||||||
z-index: 10000;
|
|
||||||
|
|
||||||
p {
|
|
||||||
width: 300px;
|
|
||||||
margin: auto;
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24pt;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.file-over {
|
|
||||||
.file-over-notice {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
.modal-backdrop {
|
|
||||||
background: rgba(0, 0, 0, .9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header, .modal-footer {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, .9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay.upload-dialog .inner {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
max-width: 550px;
|
|
||||||
padding: 0px 20px;
|
|
||||||
padding-top: 10px;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12pt;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
float: right;
|
|
||||||
font-size: 9pt;
|
|
||||||
color: #ddd;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button {
|
|
||||||
.border-radius(0px);
|
|
||||||
width: auto;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
float: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploads {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
background: #000;
|
|
||||||
font-size: 9pt;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
color: #fff;
|
|
||||||
border: 2px solid #444;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 5px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
height: 100%;
|
|
||||||
background: @green;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-error {
|
|
||||||
border-color: @red;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-processing {
|
|
||||||
border-color: @blue;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-queue-leave {
|
|
||||||
.transition(400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all);
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-queue-leave.upload-queue-leave-active, .upload-queue-enter {
|
|
||||||
.transform(scale(0));
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-queue-leave {
|
|
||||||
.transform(scale(1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.stretch-to-bottom {
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
101
public/styles/player.less
Normal file
101
public/styles/player.less
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
@import-once 'variables';
|
||||||
|
@import-once 'mixins';
|
||||||
|
|
||||||
|
.track-player {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
float: left;
|
||||||
|
width: 43px;
|
||||||
|
height: 43px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
.img-polaroid();
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
margin-left: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song, .artist {
|
||||||
|
.ellipsis();
|
||||||
|
line-height: normal;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #555;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.song {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.volume-slider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transport {
|
||||||
|
background: @pfm-light-grey;
|
||||||
|
height: 8px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
z-index: 500;
|
||||||
|
background: @pfm-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-bar {
|
||||||
|
z-index: 200;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar, .loader-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
li {
|
||||||
|
line-height: normal;
|
||||||
|
float: left;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
font-size: 15pt;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
display: block;
|
||||||
|
padding: 5px 0px;
|
||||||
|
width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: #5A5A5A;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
background: darken(#eee, 10%);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,161 +1,53 @@
|
||||||
@import-once 'base/bootstrap/bootstrap';
|
@import-once 'base/bootstrap/bootstrap';
|
||||||
@import-once 'mixins';
|
@import-once 'mixins';
|
||||||
|
@import-once 'variables';
|
||||||
|
|
||||||
.comments {
|
.tracks-listing.four-columns {
|
||||||
ul {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
.clearfix();
|
|
||||||
margin: 0px;
|
|
||||||
padding: 3px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
font-size: 8pt;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-left: 45px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
.img-polaroid();
|
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 32px;
|
width: 25%;
|
||||||
height: 32px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracks-listing.three-columns {
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
width: 33.3333%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracks-listing.two-columns {
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracks-listing {
|
.tracks-listing {
|
||||||
overflow-y: auto;
|
@icon-size: 42px;
|
||||||
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
&.no-artist {
|
|
||||||
li {
|
|
||||||
.info {
|
|
||||||
.artist {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.condensed {
|
|
||||||
li {
|
|
||||||
margin: 0px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.two-column {
|
|
||||||
li {
|
li {
|
||||||
|
.clearfix();
|
||||||
.box-sizing(border-box);
|
.box-sizing(border-box);
|
||||||
|
|
||||||
width: 50%;
|
|
||||||
float: left;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.four-column {
|
|
||||||
li {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
|
|
||||||
width: 25%;
|
|
||||||
float: left;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
overflow: hidden;
|
|
||||||
margin: 10px 0px;
|
|
||||||
padding: 0px;
|
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
margin: 5px 0px;
|
||||||
&.empty {
|
padding: 0px;
|
||||||
.alert();
|
padding-right: 10px;
|
||||||
.border-radius(0px);
|
|
||||||
float: none !important;
|
|
||||||
width: auto !important;
|
|
||||||
display: block;
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
font-size: 9pt;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: @warningBackground;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-playing, &:hover.is-playing {
|
|
||||||
background: #444;
|
|
||||||
|
|
||||||
.icons {
|
|
||||||
span, a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
.title {
|
|
||||||
color: rgba(255, 255, 255, .9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.metadata {
|
|
||||||
color: #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #eee;
|
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
.play-button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-favourited {
|
|
||||||
.icon-favourite {
|
|
||||||
color: @orange;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: #FFD76E;
|
|
||||||
text-shadow: 0px 0px 2px rgba(0,0,0,0.8);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "\f005"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
width: @icon-size;
|
||||||
|
height: @icon-size;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
.transition(background 250ms ease-out);
|
.transition(background 250ms ease-out);
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
|
@ -175,235 +67,91 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
.img-polaroid();
|
|
||||||
padding: 3px;
|
|
||||||
padding: 0px;
|
|
||||||
display: block;
|
display: block;
|
||||||
height: 38px;
|
width: 100%;
|
||||||
width: 38px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 14px;
|
display: block;
|
||||||
margin-right: 2px;
|
margin-top: 5px;
|
||||||
margin-top: 4px;
|
|
||||||
|
i.icon-microphone-off {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.icon-microphone-off, i.icon-microphone {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a, span {
|
a.info {
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
margin-left: (@icon-size + 10);
|
||||||
margin: 0px 3px;
|
|
||||||
line-height: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-microphone-off {
|
&:hover {
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 3px 0px;
|
}
|
||||||
margin-left: 40px;
|
}
|
||||||
padding-left: 5px;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
.ellipsis();
|
.ellipsis();
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: @blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metadata {
|
color: #000;
|
||||||
margin-top: 3px;
|
|
||||||
display: block;
|
|
||||||
color: #777;
|
|
||||||
font-size: 8pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-details {
|
|
||||||
.header {
|
|
||||||
.box-shadow(0px 2px 3px rgba(0, 0, 0, .3));
|
|
||||||
background: #eee;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
background: #f0f0f0;
|
|
||||||
margin: 0px;
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-details, .track-details, .album-details, .playlist-details {
|
|
||||||
.comments {
|
|
||||||
.alert {
|
|
||||||
.border-radius(0px);
|
|
||||||
margin: 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stretch-to-bottom {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-image {
|
|
||||||
img {
|
|
||||||
.img-polaroid();
|
|
||||||
.box-sizing(border-box);
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
.border-radius(0px);
|
|
||||||
display: block;
|
|
||||||
width: 'auto';
|
|
||||||
margin: 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px 0px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-details, .album-details, .playlist-details {
|
|
||||||
h1 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #222;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
#gradient>.vertical(rgba(255,255,255,0), rgba(255,255,255,1));
|
|
||||||
.box-sizing(border-box);
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 400;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: 2px solid @blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
.box-sizing(border-box);
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
background: #eee;
|
|
||||||
padding: 3px;
|
|
||||||
z-index: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-details {
|
|
||||||
h1 {
|
|
||||||
margin-left: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracks-listing li .image .play-button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracks-listing {
|
|
||||||
float: left;
|
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tracks-listing li {
|
.artist, .published-at, .genre {
|
||||||
margin: 0px;
|
color: #777;
|
||||||
margin-bottom: 5px;
|
font-size: 80%;
|
||||||
float: left;
|
}
|
||||||
|
|
||||||
|
.published-at {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artist, .published-at {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #eee;
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
height: 50px;
|
|
||||||
width: 50px;
|
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
line-height: 48px;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons, .info {
|
&.is-playing {
|
||||||
display: none;
|
background: #ddd;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
.track-toolbar {
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
.btn:first-child, > .btn:last-child {
|
|
||||||
.border-radius(0px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .btn {
|
&.is-favourited {
|
||||||
border-right: none;
|
.icons {
|
||||||
|
a.icon-favourite {
|
||||||
|
color: @orange;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #FFD76E;
|
||||||
|
text-shadow: 0px 0px 2px rgba(0,0,0,0.8);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "\f005"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown:first-child {
|
|
||||||
border-right: 1px solid #cccccc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
float: right;
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
5
public/styles/variables.less
Normal file
5
public/styles/variables.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@pfm-purple: #B885BD;
|
||||||
|
@pfm-dark-grey: #646464;
|
||||||
|
@pfm-light-grey: #969696;
|
||||||
|
@pfm-light-purple: #dac5db;
|
||||||
|
@pfm-sidebar-size: 160px;
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
<div class="dashboard">
|
<section class="recent-tracks stretch-to-bottom">
|
||||||
<section class="recent-tracks stretch-to-bottom">
|
|
||||||
<div>
|
<div>
|
||||||
<h1>
|
<h1>
|
||||||
<a href="#"><i class="icon-music"></i> see more</a>
|
<a href="/tracks"><i class="icon-music"></i> see more</a>
|
||||||
The Newest Tunes
|
The Newest Tunes
|
||||||
</h1>
|
</h1>
|
||||||
<pfm-tracks-list tracks="recentTracks" class="two-column"></pfm-tracks-list>
|
<pfm-tracks-list tracks="recentTracks" class="two-columns"></pfm-tracks-list>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,5 @@
|
||||||
<div class="current-track" ng-show="player.isPlaying">
|
<div class="track-player" ng-show="player.isPlaying">
|
||||||
<div class="image">
|
|
||||||
<img ng-src="{{player.currentTrack.covers.thumbnail}}" />
|
|
||||||
</div>
|
|
||||||
<div class="transport" ng-click="seek($event)">
|
|
||||||
<div class="bar" pfm-progress-bar="player.currentTrack.progress"></div>
|
|
||||||
<div class="loader-bar" pfm-progress-bar="player.currentTrack.loadingProgress"></div>
|
|
||||||
</div>
|
|
||||||
<ul class="buttons">
|
<ul class="buttons">
|
||||||
<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-th-list"></i></a></li>
|
|
||||||
<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-download-alt"></i></a></li>
|
|
||||||
<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-star"></i></a></li>
|
|
||||||
<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-fast-backward"></i></a></li>
|
<li><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="icon-fast-backward"></i></a></li>
|
||||||
<li>
|
<li>
|
||||||
<a pfm-eat-click ng-click="playPause()" class="play" href="#">
|
<a pfm-eat-click ng-click="playPause()" class="play" href="#">
|
||||||
|
|
@ -27,8 +17,17 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="image">
|
||||||
|
<img ng-src="{{player.currentTrack.covers.thumbnail}}" />
|
||||||
|
</div>
|
||||||
|
<div class="inner">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span class="song"><a href="{{player.currentTrack.url}}">{{player.currentTrack.title}}</a></span>
|
<span class="song"><a href="{{player.currentTrack.url}}">{{player.currentTrack.title}}</a></span>
|
||||||
<span class="artist"><a href="{{player.currentTrack.user.url}}">{{player.currentTrack.user.name}}</a></span>
|
<span class="artist"><a href="{{player.currentTrack.user.url}}">{{player.currentTrack.user.name}}</a></span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="transport" ng-click="seek($event)">
|
||||||
|
<div class="bar" pfm-progress-bar="player.currentTrack.progress"></div>
|
||||||
|
<div class="loader-bar" pfm-progress-bar="player.currentTrack.loadingProgress"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -13,11 +13,8 @@
|
||||||
</div>
|
</div>
|
||||||
<a class="info" href="{{track.url}}">
|
<a class="info" href="{{track.url}}">
|
||||||
<span class="title">{{track.title}}</span>
|
<span class="title">{{track.title}}</span>
|
||||||
<span class="metadata">
|
<span class="published-at">{{track.published_at.date | momentFromNow}}</span>
|
||||||
<span class="artist">by: {{track.user.name}} /</span>
|
<span class="artist">{{track.user.name}} / {{track.genre.name}}</span>
|
||||||
<span class="genre">{{track.genre.name}}</span> /
|
|
||||||
{{track.published_at.date | momentFromNow}}
|
|
||||||
</span>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ng-show="!tracks.length" class="empty">
|
<li ng-show="!tracks.length" class="empty">
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,8 @@
|
||||||
<div>
|
<ul class="tabs">
|
||||||
<ul class="tabs">
|
<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Tracks</a></li>
|
||||||
<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Search</a></li>
|
<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/artists">Artists</a></li>
|
||||||
<!--
|
<li ng-class="{active: $state.includes('tracks.random')}"><a href="/albums">Albums</a></li>
|
||||||
<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/tracks/popular">Popular</a></li>
|
<li ng-class="{active: $state.includes('tracks.random')}"><a href="/playlists">Playlists</a></li>
|
||||||
<li ng-class="{active: $state.includes('tracks.random')}"><a href="/tracks/random">Random</a></li>
|
</ul>
|
||||||
-->
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ui-view></ui-view>
|
<ui-view></ui-view>
|
||||||
</div>
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<div class="stretch-to-bottom">
|
<div class="stretch-to-bottom">
|
||||||
<pfm-tracks-list tracks="tracks" class="two-column"></pfm-tracks-list>
|
<pfm-tracks-list tracks="tracks" class="two-columns"></pfm-tracks-list>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in a new issue