mirror of
https://github.com/rembo10/headphones.git
synced 2026-05-02 17:59:28 +01:00
Graphic changes
*Moved menu top top *Added grid view *Fixed Album & Artist art not loading.
This commit is contained in:
Rasmus Eeg Møller
@@ -3,20 +3,9 @@ body {
|
||||
padding: 0px;
|
||||
font-family: Verdana, Tahoma, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
font-size: 100%;}
|
||||
|
||||
@font-face{
|
||||
font-family: 'WebSymbolsRegular';
|
||||
src: url('../fonts/websymbols-regular-webfont.eot');
|
||||
src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/websymbols-regular-webfont.woff') format('woff'),
|
||||
url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
|
||||
url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.web-symbol{
|
||||
font-family: 'WebSymbolsRegular';
|
||||
}
|
||||
/*
|
||||
* Univarsal
|
||||
* */
|
||||
@@ -34,9 +23,6 @@ body {
|
||||
* Links Styles
|
||||
* */
|
||||
|
||||
a span{
|
||||
font-family: 'WebSymbolsRegular';
|
||||
}
|
||||
a:link {
|
||||
color: rgb(200,200,200);
|
||||
text-decoration: none;
|
||||
@@ -54,19 +40,6 @@ a:active {/*colour in NN4.xx is red*/
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.symbol-link a {
|
||||
color: #fff;
|
||||
float: right;
|
||||
}
|
||||
.symbol-link a span{
|
||||
font-family: 'WebSymbolsRegular';
|
||||
display: inline;
|
||||
}
|
||||
.symbol-link a p {
|
||||
display: inline;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#container { width: 100%; margin: auto; }
|
||||
h1,h2,h3,h4,h5,h6{padding-left: 10px,}
|
||||
|
||||
@@ -86,16 +59,6 @@ h4 { padding: .6px; font-size: 0.8em; color: rgba(0,0,0,0.6); text-shadow: 1px 1
|
||||
|
||||
p { color: rgb(160,160,160); text-shadow: 1px 1px 1px #000; margin-top: 8px; margin-bottom: 8px; }
|
||||
|
||||
#paddingheader { width: 100%; border-bottom: 2px solid rgb(0,145,255); background: #000; }
|
||||
#switchViews { float: left; list-style-type: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,0.1); }
|
||||
#switchViews li{ border-right: 1px solid rgba(255,255,255,0.1); padding: 5px; margin: 0; line-height: 25px; cursor: pointer; display: inline-block;}
|
||||
#switchViews:last-child{
|
||||
border-right: 0;
|
||||
}
|
||||
#switchViews li:hover{
|
||||
background: rgba(0,145,255,0.1);
|
||||
}
|
||||
|
||||
/*#table_body*/
|
||||
#table_body{
|
||||
width: 100%;
|
||||
@@ -143,129 +106,107 @@ div.custom_container /*Makes use of noty*/
|
||||
{
|
||||
width: 320px;
|
||||
position: fixed;
|
||||
bottom: 25px;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
/*Menu*/
|
||||
#nav-container{
|
||||
vertical-align: top;
|
||||
width: 200px;
|
||||
border-right: 1px solid rgba(0,0,0,0.1);
|
||||
/*Commits*/
|
||||
span#commits-behind {
|
||||
position: relative;
|
||||
}
|
||||
span#commits-behind {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
margin-top: -12px;
|
||||
padding: 2px;
|
||||
border: 1px solid white;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*Menu*/
|
||||
ul#nav
|
||||
{
|
||||
list-style-type: none;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
||||
ul#nav li
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.2);
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
#nav li a{
|
||||
color: #7597A8;
|
||||
padding-left: 10px;
|
||||
line-height: 2em;
|
||||
display: block;
|
||||
}
|
||||
#nav li a span{
|
||||
font-family: 'WebSymbolsRegular';
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
line-height: 3em;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
#nav li a{
|
||||
ul#nav li a:hover{
|
||||
background-color: rgba(8,160,255,0.1);
|
||||
color: rgba(0,145,255,0.8);
|
||||
text-shadow: 1px 1px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
ul#nav li:hover {
|
||||
background: -moz-linear-gradient(top, rgba(80,80,80,0.5) 0%, rgba(40,40,40,0.5) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,80,0.5)), color-stop(100%,rgba(40,40,40,0.5))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* IE10+ */
|
||||
background: linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80505050', endColorstr='#80282828',GradientType=0 ); /* IE6-9 */
|
||||
ul#nav li a{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: block;
|
||||
color: rgba(0,0,0,0.9);
|
||||
text-shadow: 1px 1px rgba(0,145,255,0.2);
|
||||
}
|
||||
|
||||
#nav li.selected,
|
||||
#nav li:hover.selected
|
||||
{
|
||||
background: rgb(62,80,89); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(62,80,89,1) 1%, rgba(53,70,76,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(62,80,89,1)), color-stop(100%,rgba(53,70,76,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e5059', endColorstr='#35464c',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
ul#nav li.selected span,
|
||||
ul#nav li.selected a,
|
||||
ul#nav li.selected a:hover{color: #ffffff;}
|
||||
ul#nav li a:hover { color: #ffffff; }
|
||||
|
||||
/* *
|
||||
* Sub navigation
|
||||
*/
|
||||
div#subhead_container
|
||||
{
|
||||
height: 40px;
|
||||
float:left;
|
||||
|
||||
#nav-sub-container {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgb(0,145,255);
|
||||
background: #000;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
ul#subhead_menu
|
||||
{
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
ul#subhead_menu li
|
||||
{
|
||||
float: left;
|
||||
#nav-sub-container ul li {
|
||||
font-size: .8em;
|
||||
text-align: center;
|
||||
line-height: 2.8em;
|
||||
border-right: 1px solid rgba(255,255,255,0.1);
|
||||
border-left: 1px solid rgba(0,0,0,0.3);
|
||||
display: inline;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul#subhead_menu li:hover
|
||||
{
|
||||
background-image: linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||
background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||
background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||
background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
|
||||
border-right: 1px solid rgba(0,0,0,0.3);
|
||||
border-left: 1px solid rgba(255,255,255,0.1);
|
||||
ul#nav-sub { float: left; }
|
||||
ul#nav-view { float:right; }
|
||||
|
||||
ul#nav-sub,
|
||||
ul#nav-view {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul#subhead_menu li a {
|
||||
ul#nav-view li,
|
||||
ul#nav-sub li {
|
||||
float: left;
|
||||
border-right: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
ul#nav-view li,
|
||||
ul#nav-sub li a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0 10px 0 10px;
|
||||
color: #7597A8;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
ul#subhead_menu li a:hover { color: rgb(255,255,255); font-weight: bold; }
|
||||
/*
|
||||
* end Sub navigation
|
||||
* */
|
||||
|
||||
#content-container{
|
||||
ul#nav-view li:hover,
|
||||
ul#nav-sub li:hover a {
|
||||
color: rgb(0,145,255);
|
||||
border-bottom: 2px solid rgb(0,145,255);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul#content-container{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -388,8 +329,6 @@ table#artist_table th#name { text-align: left; min-width: 150px; }
|
||||
table#artist_table th#album { text-align: left; min-width: 100px; }
|
||||
table#artist_table th#have { text-align: center; min-width: 50px; }
|
||||
|
||||
table#artist_table tr { border-top: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(0,0,0,0.2); }
|
||||
|
||||
table#artist_table td#select { vertical-align: middle; text-align: center; }
|
||||
table#artist_table td#albumart { vertical-align: middle; text-align: left; }
|
||||
table#artist_table td#name { vertical-align: middle; text-align: left; }
|
||||
@@ -406,62 +345,114 @@ table#album_table th#status {vertical-align: middle; width: 175px; text-align: l
|
||||
table#album_table th#type {vertical-align: middle; width: 175px; text-align: left; min-width: 60px; max-width: 100px; }
|
||||
table#album_table th#bitrate {vertical-align: middle; text-align: left; min-width: 60px; }
|
||||
/* Album tabledata */
|
||||
table#album_table tr { border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); }
|
||||
table#album_table td#select { vertical-align: middle; text-align: left; }
|
||||
table#album_table td#albumart { vertical-align: middle; text-align: left; }
|
||||
/*Artist Bio*/
|
||||
.artist-bio-container{
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
}
|
||||
.artist-bio-container .artist-art{
|
||||
width: 240px;
|
||||
max-height: 240px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
box-shadow: 0 0 6px #000;
|
||||
-moz-box-shadow: 0 0 6px #000;
|
||||
-webkit-box-shadow: 0 0 6px #000;
|
||||
-o-box-shadow: 0 0 6px #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.artist-bio-container .artist-art img{
|
||||
width: 100%;
|
||||
}
|
||||
.artist-bio-container .artist-bio{
|
||||
float: left;
|
||||
font-size: .8em;
|
||||
display: block;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.album-container {
|
||||
/*Grid View Artist*/
|
||||
.image-container {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: left;
|
||||
width: 126px;
|
||||
margin: 10px 10px 10px 10px;
|
||||
}
|
||||
.album-container .album-image-container{
|
||||
height: 126px;
|
||||
height: 126px;
|
||||
position: relative;
|
||||
.image-tag {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 10px;
|
||||
width: .6em;
|
||||
height: 1.2em;
|
||||
border-radius: 0 0 2px 2px;
|
||||
box-shadow: 1px 2px 2px #000;
|
||||
display: none;
|
||||
}
|
||||
.album-container .album-image-container .album-image {
|
||||
.image-tag.Wanted {
|
||||
background-color: rgb(0,175,255);
|
||||
display: block;
|
||||
}
|
||||
.image-tag.Downloaded {
|
||||
background-color: #5DD345;
|
||||
display: block;
|
||||
}
|
||||
.image-container .image-box{
|
||||
height: 126px;
|
||||
width: 126px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 6px #000;
|
||||
-moz-box-shadow: 0 0 6px #000;
|
||||
-webkit-box-shadow: 0 0 6px #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-container .image-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.album-container input {
|
||||
box-shadow: 0 0 6px #000;
|
||||
-moz-box-shadow: 0 0 6px #000;
|
||||
-webkit-box-shadow: 0 0 6px #000;
|
||||
.image-container input {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-align: right;
|
||||
}
|
||||
.album-container input:checked {
|
||||
.image-container input:checked {
|
||||
content: "";
|
||||
background: rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 10px rgb(0,145,255);
|
||||
-moz-box-shadow: 0 0 10px rgb(0,145,255);
|
||||
-webkit-box-shadow: 0 0 10px rgb(0,145,255);
|
||||
}
|
||||
.album-container .album-actions {
|
||||
.image-container .image-actions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
font-size: 1.3em;
|
||||
line-height: 26px;
|
||||
height: 20%;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border-radius: 0em 0em 0.5em 0.5em;
|
||||
-moz-border-radius: 0em 0em 0.5em 0.5em;
|
||||
-webkit-border-radius: 0em 0em 0.5em 0.5em;
|
||||
-o-border-radius: 0em 0em 0.5em 0.5em;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.album-container .album-info{
|
||||
.image-container:hover .image-actions{
|
||||
display: block;
|
||||
}
|
||||
.image-container .image-info{
|
||||
text-align: left;
|
||||
font-size: 0.7em;
|
||||
position: relative;
|
||||
@@ -471,41 +462,44 @@ table#album_table td#albumart { vertical-align: middle; text-align: left; }
|
||||
height: 40px;
|
||||
text-shadow: 1px 1px 2px #000;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba(0,145,255,0.1);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
/* Album art image sizes */
|
||||
.album-art-small
|
||||
.album-art-small
|
||||
{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
float: left;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
background-color: rgb(255,255,255);
|
||||
position: relative;
|
||||
background: url('images/no-cover.png');
|
||||
text-align: center;
|
||||
box-shadow: 0 0 3px #000;
|
||||
-moz-box-shadow: 0 0 3px #000;
|
||||
-webkit-box-shadow: 0 0 3px #000;
|
||||
-o-box-shadow: 0 0 3px #000;
|
||||
}
|
||||
.album-art-small img { width: 100%; height: 100%; }
|
||||
.album-art-small .album-actions {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.artist-status div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
line-height: 3.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.album-art-small img { width: 100%; height: 100%; z-index: 200; border: 0; }
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -2em;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
font-size: 1.2em;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
transition: height 0.2s;
|
||||
-moz-transition: height 0.2s; /* Firefox 4 */
|
||||
-webkit-transition: height 0.2s; /* Safari and Chrome */
|
||||
-o-transition: height 0.2s; /* Opera */
|
||||
vertical-align: middle;
|
||||
}
|
||||
div.status:hover { }
|
||||
.album-art-big
|
||||
{
|
||||
@@ -561,10 +555,11 @@ table#track_table td#name { vertical-align: middle; text-align: left; font-size:
|
||||
table#track_table td#duration { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
|
||||
table#track_table td#location { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
|
||||
table#track_table td#bitrate { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; }
|
||||
table#history_table { width: 100%; font-size: 12px; }
|
||||
|
||||
|
||||
|
||||
/* History table*/
|
||||
|
||||
table#history_table { width: 100%; font-size: 12px; }
|
||||
table#history_table td#dateadded { vertical-align: middle; text-align: left; min-width: 150px; font-size: 14px; }
|
||||
table#history_table td#filename { vertical-align: middle; text-align: left; min-width: 100px; font-size: 15px; }
|
||||
table#history_table td#size { vertical-align: middle; text-align: left; min-width: 75px; font-size: 14px; }
|
||||
@@ -575,8 +570,6 @@ table#history_table td#action { vertical-align: middle; text-align: left; font-s
|
||||
Log
|
||||
*/
|
||||
table#log_table { width: 100%; }
|
||||
table#log_table td { padding: 3px 5px 3px 10px; }
|
||||
|
||||
table#log_table th#timestamp { text-align: left; min-width: 150px; }
|
||||
table#log_table th#level { text-align: left; min-width: 60px; }
|
||||
table#log_table th#message { text-align: left; min-width: 500px; }
|
||||
|
||||
Reference in New Issue
Block a user