mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-24 22:18:00 +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,75 +2,50 @@
|
|||
|
||||
@section('content')
|
||||
<header>
|
||||
<div>
|
||||
<h1><a href="/">Pony.fm</a></h1>
|
||||
<div class="now-playing">
|
||||
<pfm-player></pfm-player>
|
||||
</div>
|
||||
<a href="/">Pony.fm</a>
|
||||
<div class="now-playing">
|
||||
<pfm-player></pfm-player>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="site-body">
|
||||
<section class="sidebar" ng-controller="sidebar">
|
||||
<nav>
|
||||
<ul>
|
||||
@if (Auth::check())
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard</a></li>
|
||||
@else
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Home</a></li>
|
||||
@endif
|
||||
<li><h3>Discover</h3></li>
|
||||
<li ng-class="{selected: $state.includes('tracks') || $state.includes('track')}"><a href="/tracks">Music <i class="icon-music"></i></a></li>
|
||||
<li ng-class="{selected: $state.includes('albums') || $state.includes('album')}"><a href="/albums">Albums <i class="icon-th-list"></i></a></li>
|
||||
<li ng-class="{selected: $state.includes('artists') || $state.includes('artist')}"><a href="/artists">Artists <i class="icon-user"></i></a></li>
|
||||
<ul class="sidebar" ng-controller="sidebar">
|
||||
@if (Auth::check())
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Dashboard <i class="icon-home"></i></a></li>
|
||||
@else
|
||||
<li ng-class="{selected: $state.includes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
|
||||
@endif
|
||||
<li ng-class="{selected: $state.includes('tracks') || $state.includes('track') || $state.includes('albums') || $state.includes('album') || $state.includes('artists') || $state.includes('artist')}">
|
||||
<a href="/tracks">Discover <i class="icon-music"></i></a>
|
||||
</li>
|
||||
|
||||
@if (Auth::check())
|
||||
<li>
|
||||
<h3>
|
||||
<a href="#" ng-click="createPlaylist()" pfm-eat-click title="Create Playlist"><i class="icon-plus"></i></a>
|
||||
<a href="/account/playlists" ng-class="{selected: $state.is('account-content-playlists')}" title="View Playlists" class="view-all"><i class="icon-list"></i></a>
|
||||
Playlists
|
||||
</h3>
|
||||
</li>
|
||||
<li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
|
||||
<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('playlist') && $state.params.id == playlist.id}">
|
||||
<a class="menu dropdown-toggle" pfm-eat-click href="#"><i class="icon-ellipsis-vertical"></i></a>
|
||||
<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
|
||||
@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
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" pfm-eat-click ng-click="editPlaylist(playlist)">Edit</a></li>
|
||||
<li><a href="#" pfm-eat-click ng-click="unpinPlaylist(playlist)">Unpin</a></li>
|
||||
<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li ng-class="{selected: isActive('/about')}"><a href="/about">Meta <i class="icon-info"></i></a></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
|
||||
@if (Auth::check())
|
||||
<li>
|
||||
<h3>
|
||||
<a href="#" ng-click="createPlaylist()" pfm-eat-click title="Create Playlist"><i class="icon-plus"></i></a>
|
||||
<a href="/account/playlists" ng-class="{selected: $state.is('account-content-playlists')}" title="View Playlists" class="view-all"><i class="icon-list"></i></a>
|
||||
Playlists
|
||||
</h3>
|
||||
</li>
|
||||
<li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
|
||||
<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('playlist') && $state.params.id == playlist.id}">
|
||||
<a class="menu dropdown-toggle" pfm-eat-click href="#"><i class="icon-ellipsis-vertical"></i></a>
|
||||
<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
|
||||
|
||||
<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
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" pfm-eat-click ng-click="editPlaylist(playlist)">Edit</a></li>
|
||||
<li><a href="#" pfm-eat-click ng-click="unpinPlaylist(playlist)">Unpin</a></li>
|
||||
<li><a href="#" pfm-eat-click ng-click="deletePlaylist(playlist)" ng-show="playlist.user_id == auth.user_id">Delete</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
<ui-view class="site-content">
|
||||
@yield('app_content')
|
||||
</ui-view>
|
||||
|
|
@ -86,17 +61,7 @@
|
|||
|
||||
@section('scripts')
|
||||
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<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 = {
|
||||
token: "{{Session::token()}}",
|
||||
auth: {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,6 @@
|
|||
@yield('styles')
|
||||
</head>
|
||||
<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('scripts')
|
||||
</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 = () ->
|
||||
windowHeight = $(window).height()
|
||||
$siteBody = $ '.site-body'
|
||||
$siteBody.height windowHeight - $('header').height() - 1
|
||||
$siteBody.height windowHeight - $('header').height()
|
||||
|
||||
$('.stretch-to-bottom').each () ->
|
||||
$this = $ this
|
||||
newHeight = windowHeight - $this.offset().top + 1
|
||||
newHeight = windowHeight - $this.offset().top
|
||||
if newHeight > 0
|
||||
$this.height newHeight
|
||||
|
||||
|
|
@ -16,11 +16,6 @@ window.handleResize = () ->
|
|||
$this.css
|
||||
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) ->
|
||||
e.preventDefault()
|
||||
$this.css {height: 'auto'}
|
||||
|
|
|
|||
|
|
@ -1,436 +1,2 @@
|
|||
@import-once 'base/bootstrap/bootstrap';
|
||||
@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 '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-up-enter, .slide-up-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/font-awesome/font-awesome';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'layout';
|
||||
@import 'home';
|
||||
@import 'account-content';
|
||||
@import 'components';
|
||||
@import 'forms';
|
||||
@import 'tracks';
|
||||
@import 'albums';
|
||||
@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 'mixins';
|
||||
@import-once 'variables';
|
||||
|
||||
.fade-hide, .fade-show {
|
||||
.transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) 350ms);
|
||||
.stretch-to-bottom {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fade-hide {
|
||||
opacity:1;
|
||||
.dropdowns {
|
||||
.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 {
|
||||
opacity:0;
|
||||
.tabs {
|
||||
.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 {
|
||||
opacity:0;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-show.fade-show-active {
|
||||
opacity:1;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html body {
|
||||
.btn {
|
||||
.border-radius(0px);
|
||||
}
|
||||
|
||||
.ui-datepicker {
|
||||
.border-radius(0px);
|
||||
|
||||
|
|
@ -34,9 +166,11 @@ html body {
|
|||
border-bottom: 1px solid #777;
|
||||
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 {
|
||||
.box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
|
||||
z-index: 1000;
|
||||
|
|
@ -184,10 +276,6 @@ html .dropdown-menu {
|
|||
form {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
.border-radius(0px);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -200,8 +288,9 @@ html {
|
|||
|
||||
.pagination {
|
||||
border: none;
|
||||
background: #ddd;
|
||||
margin: 5px 0px;
|
||||
background: #eee;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -225,11 +314,12 @@ html {
|
|||
padding: 1px 10px;
|
||||
display: block;
|
||||
float: left;
|
||||
color: @pfm-purple;
|
||||
}
|
||||
}
|
||||
|
||||
li.active a {
|
||||
background: #444;
|
||||
background: @pfm-purple;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,98 +1,71 @@
|
|||
.pfm-form, .editor {
|
||||
.form-row {
|
||||
margin-bottom: 10px;
|
||||
@import-once "base/bootstrap/bootstrap";
|
||||
|
||||
.error {
|
||||
.alert();
|
||||
.alert-error();
|
||||
.form-row {
|
||||
margin-bottom: 10px;
|
||||
|
||||
display: none;
|
||||
padding: 3px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
.error {
|
||||
.alert();
|
||||
.alert-error();
|
||||
|
||||
.alert {
|
||||
padding: 3px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
label {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
}
|
||||
display: none;
|
||||
padding: 3px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.alert {
|
||||
.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-weight: bold;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], textarea {
|
||||
padding: 3px;
|
||||
border: 1px solid;
|
||||
border-color: #9c9c9c #9c9c9c #ccc #ccc;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], textarea, select {
|
||||
.border-radius(0px);
|
||||
.box-sizing(border-box);
|
||||
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
label {
|
||||
input[type="checkbox"] {
|
||||
margin: 0px;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 60px;
|
||||
font-size: 8pt;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
label {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
label.strong {
|
||||
font-size: 8pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], textarea {
|
||||
padding: 3px;
|
||||
border: 1px solid;
|
||||
border-color: #9c9c9c #9c9c9c #ccc #ccc;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="date"], textarea, select {
|
||||
.border-radius(0px);
|
||||
.box-sizing(border-box);
|
||||
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
label {
|
||||
input[type="checkbox"] {
|
||||
margin: 0px;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.home-container {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -1,697 +1,144 @@
|
|||
@import-once 'base/bootstrap/bootstrap';
|
||||
@import-once 'mixins';
|
||||
@import-once 'variables';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html body {
|
||||
height: 100%;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
background: url('http://mlpforums.com/public/style_images/mlp/bg1.png');
|
||||
background: @pfm-dark-grey;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
}
|
||||
|
||||
.background-color {
|
||||
background: rgba(42, 42, 42, 1);
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
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, .site-body {
|
||||
.box-shadow(0 0 7px rgba(0, 0, 0, .3));
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
.clearfix();
|
||||
.box-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
|
||||
background: #222;
|
||||
|
||||
> div {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
h1 {
|
||||
font-size: 14pt;
|
||||
margin: 0px;
|
||||
padding: 0px 10px;
|
||||
line-height: 47px;
|
||||
> a {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: (@pfm-sidebar-size - 25);
|
||||
height: 64px;
|
||||
line-height: 52px;
|
||||
background: @pfm-purple;
|
||||
color: #fff;
|
||||
font-size: 24pt;
|
||||
padding-left: 25px;
|
||||
font-weight: lighter;
|
||||
position: relative;
|
||||
z-index: 600;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
background: darken(@pfm-purple, 25%);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
|
||||
.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;
|
||||
|
||||
a {
|
||||
.not-selectable();
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
padding: 5px;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, .7);
|
||||
|
||||
&.selected, &.selected:hover {
|
||||
color: @blue;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.view-all {
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
line-height: normal;
|
||||
|
||||
.dropdown-menu {
|
||||
width: 148px;
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
> 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;
|
||||
text-decoration: none;
|
||||
|
||||
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;
|
||||
border: 5px solid #222;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
margin-left: 148px;
|
||||
|
||||
> div {
|
||||
.box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0px 15px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner-view {
|
||||
.now-playing {
|
||||
margin-left: @pfm-sidebar-size;
|
||||
height: 64px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
.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 {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover > a.dropdown-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> a.dropdown-toggle {
|
||||
float: right;
|
||||
padding: 10px 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
padding: 10px 25px;
|
||||
padding-right: 0px;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-content {
|
||||
h1, h2 {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #747474;
|
||||
font-weight: 300;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
margin-left: @pfm-sidebar-size;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.file-over-notice {
|
||||
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 'mixins';
|
||||
@import-once 'variables';
|
||||
|
||||
.comments {
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
margin-bottom: 5px;
|
||||
.tracks-listing.four-columns {
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.clearfix();
|
||||
margin: 0px;
|
||||
padding: 3px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.tracks-listing.three-columns {
|
||||
li {
|
||||
float: left;
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 8pt;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 45px;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
.img-polaroid();
|
||||
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
.tracks-listing.two-columns {
|
||||
li {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tracks-listing {
|
||||
overflow-y: auto;
|
||||
@icon-size: 42px;
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
|
||||
&.no-artist {
|
||||
li {
|
||||
.info {
|
||||
.artist {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.condensed {
|
||||
li {
|
||||
margin: 0px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.two-column {
|
||||
li {
|
||||
.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;
|
||||
.clearfix();
|
||||
.box-sizing(border-box);
|
||||
|
||||
line-height: normal;
|
||||
|
||||
&.empty {
|
||||
.alert();
|
||||
.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 {
|
||||
.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin: 5px 0px;
|
||||
padding: 0px;
|
||||
padding-right: 10px;
|
||||
|
||||
.image {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
float: left;
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
position: relative;
|
||||
|
||||
.play-button {
|
||||
.transition(background 250ms ease-out);
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
|
@ -175,235 +67,91 @@
|
|||
}
|
||||
|
||||
img {
|
||||
.img-polaroid();
|
||||
padding: 3px;
|
||||
padding: 0px;
|
||||
display: block;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
margin-right: 2px;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a, span {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0px 3px;
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
.icon-microphone-off {
|
||||
i.icon-microphone-off {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 3px 0px;
|
||||
margin-left: 40px;
|
||||
padding-left: 5px;
|
||||
line-height: normal;
|
||||
|
||||
.title {
|
||||
.ellipsis();
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
i.icon-microphone-off, i.icon-microphone {
|
||||
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;
|
||||
}
|
||||
|
||||
.tracks-listing li {
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
float: left;
|
||||
|
||||
.image {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
.play-button {
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.icons, .info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
a.info {
|
||||
display: block;
|
||||
margin-left: (@icon-size + 10);
|
||||
|
||||
html {
|
||||
.track-toolbar {
|
||||
padding: 5px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:first-child, > .btn:last-child {
|
||||
.border-radius(0px);
|
||||
> span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> .btn {
|
||||
border-right: none;
|
||||
.title {
|
||||
.ellipsis();
|
||||
|
||||
color: #000;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.dropdown:first-child {
|
||||
border-right: 1px solid #cccccc;
|
||||
.artist, .published-at, .genre {
|
||||
color: #777;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.published-at {
|
||||
float: right;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
.artist, .published-at {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
|
||||
.image {
|
||||
.play-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-playing {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
&.is-favourited {
|
||||
.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="#"><i class="icon-music"></i> see more</a>
|
||||
The Newest Tunes
|
||||
</h1>
|
||||
<pfm-tracks-list tracks="recentTracks" class="two-column"></pfm-tracks-list>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="recent-tracks stretch-to-bottom">
|
||||
<div>
|
||||
<h1>
|
||||
<a href="/tracks"><i class="icon-music"></i> see more</a>
|
||||
The Newest Tunes
|
||||
</h1>
|
||||
<pfm-tracks-list tracks="recentTracks" class="two-columns"></pfm-tracks-list>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
<div class="current-track" 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>
|
||||
<div class="track-player" ng-show="player.isPlaying">
|
||||
<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="playPause()" class="play" href="#">
|
||||
|
|
@ -27,8 +17,17 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title">
|
||||
<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>
|
||||
<div class="image">
|
||||
<img ng-src="{{player.currentTrack.covers.thumbnail}}" />
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<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>
|
||||
</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>
|
||||
|
|
@ -13,11 +13,8 @@
|
|||
</div>
|
||||
<a class="info" href="{{track.url}}">
|
||||
<span class="title">{{track.title}}</span>
|
||||
<span class="metadata">
|
||||
<span class="artist">by: {{track.user.name}} /</span>
|
||||
<span class="genre">{{track.genre.name}}</span> /
|
||||
{{track.published_at.date | momentFromNow}}
|
||||
</span>
|
||||
<span class="published-at">{{track.published_at.date | momentFromNow}}</span>
|
||||
<span class="artist">{{track.user.name}} / {{track.genre.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-show="!tracks.length" class="empty">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
<div>
|
||||
<ul class="tabs">
|
||||
<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Search</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="/tracks/random">Random</a></li>
|
||||
-->
|
||||
</ul>
|
||||
<ul class="tabs">
|
||||
<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Tracks</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.random')}"><a href="/playlists">Playlists</a></li>
|
||||
</ul>
|
||||
|
||||
<ui-view></ui-view>
|
||||
</div>
|
||||
<ui-view></ui-view>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<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>
|
||||
Loading…
Reference in a new issue