mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 21:18:00 +01:00
643 lines
No EOL
10 KiB
Text
Vendored
643 lines
No EOL
10 KiB
Text
Vendored
/**
|
|
* Pony.fm - A community for pony fan music.
|
|
* Copyright (C) 2015 Peter Deltchev
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
@import 'base/bootstrap/bootstrap';
|
|
@import 'mixins';
|
|
@import 'variables';
|
|
|
|
@media (max-width: 1300px) and (min-width: 720px) {
|
|
html {
|
|
.albums-listing, .playlists-listing, .users-listing {
|
|
&.two-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
li {
|
|
width: 33.33333%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
html {
|
|
.albums-listing, .playlists-listing, .users-listing {
|
|
&.two-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.albums-listing, .playlists-listing, .users-listing {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
|
|
&.two-columns {
|
|
li {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
li {
|
|
.box-sizing(border-box);
|
|
float: left;
|
|
width: 25%;
|
|
padding: 5px;
|
|
line-height: normal;
|
|
|
|
a {
|
|
background: #eee;
|
|
display: block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
img {
|
|
display: block;
|
|
float: left;
|
|
width: 67px;
|
|
height: 67px;
|
|
background: #ddd;
|
|
}
|
|
|
|
.info {
|
|
margin-left: 72px;
|
|
display: block;
|
|
}
|
|
|
|
.title, .published, .stats {
|
|
display: block;
|
|
color: #444;
|
|
padding: 5px;
|
|
}
|
|
|
|
.title {
|
|
.ellipsis();
|
|
|
|
font-weight: bold;
|
|
font-size: 11pt;
|
|
padding-left: 3px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.published {
|
|
font-size: 8pt;
|
|
color: #555;
|
|
}
|
|
|
|
.published, .stats {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.stats {
|
|
font-size: 10pt;
|
|
color: #777;
|
|
position: absolute;
|
|
bottom: 3px;
|
|
right: 3px;
|
|
|
|
strong {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background: #ddd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.resource-details {
|
|
&.track-details {
|
|
> header {
|
|
h2, h1 {
|
|
margin-left: 47px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.artist-details {
|
|
> header {
|
|
padding: 15px;
|
|
|
|
> img {
|
|
width: 150px;
|
|
height: 150px;
|
|
float: left;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
}
|
|
|
|
> .artist-right {
|
|
margin-left: 165px;
|
|
margin-top: 5px;
|
|
|
|
> h1, .follower-count {
|
|
font-size: 20pt;
|
|
color: #fff;
|
|
background: rgba(0,0,0,0.5);
|
|
padding: 5px 10px;
|
|
margin-bottom: 5px;
|
|
display: table;
|
|
}
|
|
|
|
> .follower-count {
|
|
font-size: 14pt;
|
|
}
|
|
|
|
> .btn {
|
|
display: table;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-star {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
&.x-archived {
|
|
background: #eee;
|
|
}
|
|
}
|
|
|
|
.share-buttons {
|
|
.transition(opacity 250ms ease-out);
|
|
margin-top: 5px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
height: 28px;
|
|
|
|
&.loaded {
|
|
opacity: 1;
|
|
overflow: visible;
|
|
}
|
|
|
|
.facebook, .twitter {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
> header {
|
|
padding: 5px;
|
|
background: #eee;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
|
|
h1 {
|
|
margin: 0px;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-weight: normal;
|
|
clear: none;
|
|
line-height: normal;
|
|
display: block;
|
|
float: none;
|
|
font-size: 8pt;
|
|
color: #777;
|
|
border: none;
|
|
|
|
a {
|
|
display: inline;
|
|
float: none;
|
|
color: #111;
|
|
}
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
color: #C2889C;
|
|
font-size: 10pt;
|
|
border-bottom: 2px solid #ddd;
|
|
padding: 5px 0px;
|
|
margin: 0px;
|
|
margin-bottom: 5px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.resource-toolbar {
|
|
.clearfix();
|
|
|
|
background: #eee;
|
|
list-style: none;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-bottom: 5px;
|
|
|
|
> li {
|
|
padding: 5px;
|
|
float: left;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@icon-size: 42px;
|
|
|
|
@media (max-width: 1300px) and (min-width: 720px) {
|
|
html {
|
|
.tracks-listing {
|
|
&.four-columns li {
|
|
width: 33.333%;
|
|
}
|
|
|
|
&.three-columns li {
|
|
width: 50%;
|
|
}
|
|
|
|
&.two-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
html {
|
|
.tracks-listing {
|
|
&.four-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
&.three-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
&.two-columns li {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tracks-listing.four-columns {
|
|
li {
|
|
float: left;
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
.tracks-listing.three-columns {
|
|
li {
|
|
float: left;
|
|
width: 33.3333%;
|
|
}
|
|
}
|
|
|
|
.tracks-listing.two-columns {
|
|
li {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
html .single-player .play-button {
|
|
display: block;
|
|
}
|
|
|
|
.single-player, .tracks-listing li .image {
|
|
float: left;
|
|
width: @icon-size;
|
|
height: @icon-size;
|
|
position: relative;
|
|
|
|
.button-container {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
> i {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.play-button {
|
|
.transition(background 250ms ease-out);
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
font-size: 12pt;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background: rgba(0, 0, 0, .4);
|
|
display: none;
|
|
pointer-events: all;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .8);
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
html {
|
|
li {
|
|
&.empty {
|
|
.empty-box;
|
|
}
|
|
|
|
.cache-loading {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
line-height: 100%;
|
|
font-size: 93%;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-box {
|
|
.border-radius(0px);
|
|
background: lighten(@pfm-purple, 30%);
|
|
border: 1px solid lighten(@pfm-purple, 10%);
|
|
color: lighten(@pfm-purple, 3%);
|
|
float: none !important;
|
|
width: auto !important;
|
|
display: block;
|
|
margin-top: 5px;
|
|
padding: 5px;
|
|
font-size: 9pt;
|
|
|
|
&:hover {
|
|
background-color: lighten(@pfm-purple, 30%);
|
|
}
|
|
}
|
|
|
|
.tracks-listing {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
|
|
|
|
li {
|
|
.box-sizing(border-box);
|
|
overflow: hidden;
|
|
|
|
line-height: normal;
|
|
padding: 0px;
|
|
margin: 5px 0px;
|
|
padding-right: 10px;
|
|
position: relative;
|
|
height: 43px;
|
|
|
|
.icons {
|
|
float: right;
|
|
display: block;
|
|
margin-top: 5px;
|
|
|
|
i.fa-microphone-slash {
|
|
opacity: .5;
|
|
}
|
|
|
|
i.fa-microphone-slash, i.fa-microphone {
|
|
color: #777;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a.info {
|
|
display: block;
|
|
margin-left: (@icon-size + 10);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
> span {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
.ellipsis();
|
|
|
|
color: #000;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.artist {
|
|
.ellipsis();
|
|
}
|
|
|
|
.artist, .stats, .genre, .stats-expanded {
|
|
color: #777;
|
|
font-size: 80%;
|
|
}
|
|
|
|
.stats {
|
|
float: right;
|
|
padding: 3px;
|
|
|
|
strong {
|
|
color: #C1889E;
|
|
}
|
|
}
|
|
|
|
.artist, .stats {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #dedede;
|
|
|
|
.image {
|
|
.play-button {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-playing {
|
|
background: #ddd;
|
|
}
|
|
|
|
&.has-played {
|
|
background: red;
|
|
}
|
|
|
|
&.is-favourited {
|
|
.icons {
|
|
a.icon-favourite {
|
|
color: @brand-warning;
|
|
text-decoration: none;
|
|
|
|
i {
|
|
color: #FFD76E;
|
|
text-shadow: 0px 0px 2px rgba(0,0,0,0.8);
|
|
|
|
&:before {
|
|
content: "\f005"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.users-listing {
|
|
&.-condensed {
|
|
.image {
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
.info {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.published {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-menu {
|
|
float: right;
|
|
margin-top: 15px;
|
|
margin-right: 14px;
|
|
font-size: 20pt;
|
|
|
|
a {
|
|
color: #5A5A5A;
|
|
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.counter {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 90px;
|
|
font-size: 8pt;
|
|
color: #fff;
|
|
background: #b885bd;
|
|
width: auto;
|
|
height: 15px;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
padding: 0 3px;
|
|
display: none;
|
|
|
|
&.show {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
min-height: 50px;
|
|
margin-bottom: 10px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
border-radius: 2px;
|
|
|
|
.img-link {
|
|
float: left;
|
|
}
|
|
.message {
|
|
margin-left: 55px;
|
|
padding: 5px 5px 0 5px;
|
|
display: block;
|
|
color: #666;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
&.unread {
|
|
border: 1px solid #b885bd;
|
|
}
|
|
}
|
|
|
|
.notification-pullout {
|
|
position: absolute;
|
|
top: 64px;
|
|
right: -410px;
|
|
width: 400px;
|
|
height: ~"calc(100% - 64px)";
|
|
z-index: 1000;
|
|
background: #eee;
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transform: translateX(0px) translateZ(0px);
|
|
|
|
&.active {
|
|
transform: translateX(-410px) translateZ(0px);
|
|
}
|
|
|
|
.notif-container {
|
|
padding: 20px;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.notif-switch {
|
|
margin-bottom: 15px;
|
|
|
|
span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.notif-list {
|
|
.error {
|
|
text-align: center;
|
|
font-size: 16pt;
|
|
color: #222;
|
|
}
|
|
} |