FIX: fix style.less

This commit is contained in:
maxkoryukov
2016-03-12 22:54:05 +05:00
parent 0ac947099c
commit 9a0713cedb
4 changed files with 486 additions and 157 deletions

View File

@@ -26,6 +26,19 @@ body {
padding: 0;
}
// Clearfix from http://stackoverflow.com/a/8554054/1115187
.clearfix()
{
&:after
{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
// Links
a {
color: @link-color;
@@ -76,18 +89,149 @@ hr {
margin: 1em 0;
padding: 0;
}
small {
font-size: 85%;
small, .small
{
font-size: xx-small;
}
// -------------------------------------------------
// Config Page
// -------------------------------------------------
// OLD VERSION:
.configtable {
legend {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 1px 1px 0 #FFFFFF;
}
tr {
td {
&:last-child {
border-left: 1px dotted #ddd;
padding-left: 20px;
}
}
}
td {
padding-right: 15px;
width: 50%;
}
}
// NEW VERSION:
.config
{
legend {
font-size: larger;
font-weight: bold;
margin-bottom: 1em;
text-shadow: 1px 1px 0 #FFFFFF;
}
.caption
{
color: @caption-color;
line-height: @base-font-size;
margin-top: 3px;
}
.tab
{
.columnRule( 1px solid @border-color );
.columnCount(2);
.columnGap(4em);
.message
{
.columnSpan(all);
display:block;
background-color:transparent;
margin-bottom:1em;
}
}
.block
{
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
.option
{
// TODO : need responsive - remove floating, use flexbox
.clearfix();
margin-bottom: 1em;
font-size: @base-font-size;
.input-wrapper
{
// TODO : need responsive
float: left;
}
label
{
// TODO : need responsive
width: 170px;
font-size: @base-font-size;
// TODO : need responsive
float: left;
}
input
{
margin-right: 5px;
}
input[type=text],
input[type=password],
input[type=number],
{
border: 1px solid #DDD;
border-top: 1px solid #CDCDCD;
.shadow(inset 0 1px 1px #e0e0e0);
color: @text-color;
font-size: larger;
// TODO : need responsive
max-width: 230px;
padding: 3px 5px;
}
input[type=number]
{
max-width: 5em;
}
}
.embed-option-block
{
margin-left:1em;
}
}
img {
&.albumArt {
.-less-albumArt(@size)
{
float: left;
min-height: 100%;
min-width: 100%;
min-height: @size;
min-width: @size;
max-width: 250px;
max-height: 300px;
position: relative;
}
&.albumArt
{
.-less-albumArt(100%);
}
&.albumArt-nostretch
{
.-less-albumArt(64px);
}
}
.title {
margin-bottom:20px;
@@ -105,9 +249,9 @@ table {
border-collapse: collapse;
border-spacing: 0;
th {
.gradient(#FAFAFA, #EAEAEA);
.gradient(@gradient-color-1, @gradient-color-2);
border-left: 1px solid #E0E0E0;
.shadow(1px 0 0 #FAFAFA);
.shadow(1px 0 0 @gradient-color-1);
text-shadow:1px 1px 0 #FFFFFF ;
input[type="checkbox"]{ vertical-align: middle;}
&:first-child { border-left:0;.shadow(none)}
@@ -126,13 +270,13 @@ table {
// Forms
select, input, textarea, button
{
font: 99%;
font-size: 99%;
}
select
select
{
.rounded(5px);
background: #4F4F4F;
.rounded(@heading-input-radius);
background: @brand-color;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
color: #fff;
@@ -155,7 +299,7 @@ button {
overflow: visible;
width: auto;
}
input,select,form .checkbox input,.configtable td#middle, #artist_table td#have,#album_table td#have { vertical-align: middle; }
input,select,form .checkbox input,.configtable td#middle, #artist_table td#have { vertical-align: middle; }
input[type="radio"]{ vertical-align: text-bottom; }
::-moz-selection, ::selection {
@@ -164,7 +308,7 @@ input[type="radio"]{ vertical-align: text-bottom; }
text-shadow: none;
}
input[type=submit], input[type=button] {
.rounded(5px);
.rounded(@heading-input-radius);
background: #222222 url("../images/button.png") repeat-x;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@@ -197,8 +341,8 @@ form {
}
}
}
.row {
font-family: Helvetica, Arial;
margin-bottom: 10px;
label {
display: block;
@@ -292,7 +436,7 @@ ul#nav {
float: right;
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #FAFAFA;
border-left: 1px solid @gradient-color-1;
.shadow(-1px 0 0 #e0e0e0);
height: 58px;
li {
@@ -314,8 +458,8 @@ ul#nav {
.gradient(#F1F1F1, #E0E0E0);
border: 1px solid #DDDDDD;
.rounded(3px);
.shadow(0 1px 0 #FAFAFA);
.shadow(0 1px 0 #FAFAFA inset);
.shadow(0 1px 0 @gradient-color-1);
.shadow(0 1px 0 @gradient-color-1 inset);
-webkit-transition:color .2s ease-in;
-moz-transition:color .2s ease-in;
-o-transition:color .2s ease-in;
@@ -339,8 +483,8 @@ ul#nav {
}
// Layout
header {
.gradient(#fafafa, #eaeaea);
border-bottom: 1px solid #CACACA;
.gradient(@gradient-color-1, @gradient-color-2);
border-bottom: 1px solid @border-color;
.shadow(0 0 10px rgba(0, 0, 0, 0.1));
height: 58px;
position: fixed;
@@ -350,7 +494,7 @@ header {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 960px;
width: 990px;
}
#logo {
float: left;
@@ -388,12 +532,12 @@ footer {
top: 4px;
}
}
#ajaxMsg {
.ajaxMsg {
border: 1px solid @border-color;
.gradient(#FFFFFF, #EEEEEE);
.rounded(7px);
display: none;
font-size: 14px;
font-size: larger;
right: 10px;
.shadow(0px 0px 2px #aaa);
padding: 7px 10px;
@@ -433,9 +577,9 @@ footer {
}
#updatebar {
#ajaxMsg;
.ajaxMsg;
display: block;
.gradient(#FCF5C2,@msg-bg);
.gradient(#FCF5C2, @msg-bg);
}
// Subheader
@@ -450,29 +594,39 @@ footer {
list-style-type: none;
width: 100%;
z-index: 998;
#subhead_menu {
#subhead_menu
{
float: right;
margin-top: 5px;
margin-top: 0px;
position: relative;
z-index: 99;
a {
.gradient(#F4F4F4, #e7e7e7);
a
{
.gradient(@gradient-color-1, @gradient-color-2);
font-family: @base-font-face;
font-size: 12px;
font-size: @base-font-size;
font-weight: normal;
&:hover {
.gradient(#599BDC, #3072B3);
color: #FFF;
border-color: #518CC6 #518CC6 #2A65A0;
&:hover
{
.gradient(#599BDC, #3072B3);
color: #FFF;
border-color: #518CC6 #518CC6 #2A65A0;
}
}
}
#back_to_previous_link
{
margin-top: 20px;
position: relative;
z-index: 99;
}
}
}
// Search
div#searchbar {
border-left: 1px solid #FAFAFA;
border-left: 1px solid @gradient-color-1;
.shadow(-1px 0 0 #e0e0e0);
padding: 15px 0 15px 20px;
position: absolute;
@@ -481,16 +635,17 @@ div#searchbar {
input[type=text] {
border: 1px solid #DDD;
border-top: 1px solid #CDCDCD;
.rounded(@heading-input-radius);
.shadow(0 1px 0 #f1f1f1);
.shadow(inset 0 1px 1px #e0e0e0);
color: #999;
color: @caption-color;
float: left;
font-size: 14px;
font-size: larger;
height: auto;
line-height: normal;
margin-right: 5px;
padding: 4px 5px 4px 25px;
width: 150px;
width: 185px;
}
.mini-icon {
color: #999;
@@ -501,28 +656,6 @@ div#searchbar {
}
}
// Config Page
.configtable {
legend {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 1px 1px 0 #FFFFFF;
}
tr {
td {
&:last-child {
border-left: 1px dotted #ddd;
padding-left: 20px;
}
}
}
td {
padding-right: 15px;
width: 50%;
}
}
// TABLES
// wrappers
@@ -530,7 +663,7 @@ div#searchbar {
_height: 302px;
background-color: #FFF;
clear: both;
margin: 30px auto 0;
margin: 60px auto 0;
min-height: 100px;
position: relative;
width: 100%;
@@ -744,6 +877,15 @@ div#artistheader {
}
}
.nopad
{
margin-bottom: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding: 0 !important;
}
#album_table {
background-color: #FFF;
th#select {
@@ -757,7 +899,8 @@ div#artistheader {
text-align: center;
width: 175px;
}
th#status, th#albumart {
th#albumart
{
min-width: 50px;
text-align: left;
}
@@ -771,16 +914,65 @@ div#artistheader {
text-align: center;
width: 80px;
}
td#albumart {
img {
background: #FFF;
border: 1px solid #ccc;
padding: 3px;
}
th#albumname
{
min-width: 150px;
text-align: center;
}
td#status {
a#wantlossless {
white-space: nowrap;
th#bitrate,
th#albumformat
{
min-width: 60px;
text-align: center;
}
th#type
{
min-width: 100px;
text-align: center;
width: 175px;
}
td
{
vertical-align: middle;
font-size: larger;
&#have
{
}
&#albumname,
&#reldate,
&#type,
&#bitrate,
&#albumformat,
&#score,
&#wantlossless
{
text-align: center;
}
&#select
{
text-align: left;
}
&#albumart
{
text-align: left;
img {
background: #FFF;
border: 1px solid #ccc;
padding: 3px;
}
}
&#status
{
text-align: center;
a#wantlossless
{
white-space: nowrap;
}
}
}
}
@@ -829,6 +1021,31 @@ div#artistheader {
}
}
#downloads_table
{
th
{
text-align: center;
&#title
{
min-width: 500px;
}
&#size
{
min-width: 80px;
}
&#provider
{
min-width: 100px;
}
&#kind
{
min-width: 80px;
}
}
}
// History
#history_table {
background-color: #FFF;
@@ -874,18 +1091,111 @@ div#artistheader {
padding: 2px 10px;
}
}
// Searchresults
#searchresults_table {
th#albumname {
min-width: 225px;
#searchresults_table
{
th
{
font-size: larger;
text-align: left;
min-width: 50px;
&#artistnamesmall
{
min-width: 125px;
}
&#reldate
{
min-width: 80px;
text-align: center;
}
&#format
{
}
&#tracks
{
}
&#albumname
{
min-width: 250px;
}
&#artistname
{
min-width: 325px;
}
&#score
{
min-width: 75px;
text-align: center;
}
&#scoresmall
{
}
}
th#artistname {
min-width: 325px;
td
{
vertical-align: middle;
text-align: left;
font-size: larger;
min-width: 50px;
&#artistnamesmall
{
min-width: 100px;
}
&#reldate
{
min-width: 80px;
text-align: center;
}
&#format
{
}
&#tracks
{
}
&#albumname
{
min-width: 220px;
}
&#artistname
{
min-width: 300px;
}
&#add
{
}
&#score
{
min-width: 75px;
.bar
{
width: 100px;
margin: 0 auto;
border: 1px solid @border-color;
padding: 1px;
background-color: #FFF;
.score
{
height: 14px;
color: @text-color;
color: #FFF;
font-size: 11px;
vertical-align: middle;
line-height: normal;
.gradient(#A3E532,#90CC2A);
}
}
}
}
#artistImg {
background: url("../images/loader_black.gif") no-repeat scroll center center #FFFFFF;
background: url("../images/loader_black.gif") no-repeat scroll center center #FFFFFF;
border: 3px solid #FFFFFF;
box-shadow: 1px 1px 2px 0 #555555;
float: left;
@@ -894,36 +1204,8 @@ div#artistheader {
text-indent: -3000px;
width: 50px;
}
td#albumname {
min-width: 200px;
text-align: left;
vertical-align: middle;
}
td#artistname {
min-width: 300px;
text-align: left;
vertical-align: middle;
}
td#add {vertical-align: middle;}
td#score {
.bar {
width: 100px;
margin: 0 auto;
border: 1px solid @border-color;
padding: 1px;
background-color: #FFF;
.score {
height: 14px;
color: @text-color;
color: #FFF;
font-size: 11px;
vertical-align: middle;
line-height: normal;
.gradient(#A3E532,#90CC2A);
}
}
}
}
.progress-container {
background: #FFF;
border: 1px solid #ccc;
@@ -997,6 +1279,12 @@ div#artistheader {
}
}
}
#trashcan
{
margin-top:15px;
}
.cloudtag {
font-size: 16px;
#cloud {
@@ -1089,48 +1377,11 @@ div#artistheader {
}
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1px;
&:after { clear: both; }
}
// Table width
#album_table th#albumname, #upcoming_table th#artistname, #wanted_table th#artistname {
min-width: 150px;
text-align: center;
}
#album_table th#type, #track_table th#duration {
min-width: 100px;
text-align: center;
width: 175px;
}
#album_table th#bitrate, #album_table th#albumformat {
min-width: 60px;
text-align: center;
}
#album_table td#select, #album_table td#albumart {
text-align: left;
vertical-align: middle;
}
#album_table td#albumname,#album_table td#reldate, #album_table td#type, #track_table td#duration, #upcoming_table td#select, #upcoming_table td#status, #wanted_table td#select, #wanted_table td#status {
text-align: center;
vertical-align: middle;
}
#album_table td#status, #album_table td#bitrate, #album_table td#albumformat, #album_table td#wantlossless {
font-size: 13px;
text-align: center;
vertical-align: middle;
}
div#albumheader .albuminfo li span, div#artistheader h3 span {
font-weight: 400;
}
#track_table th#bitrate, #track_table th#format, #upcoming_table th#type, #wanted_table th#type, #searchresults_table th#score {
#track_table th#bitrate, #track_table th#format, #upcoming_table th#type, #wanted_table th#type
{
min-width: 75px;
text-align: center;
}
@@ -1144,6 +1395,33 @@ div#albumheader .albuminfo li span, div#artistheader h3 span {
text-align: center;
vertical-align: middle;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
#upcoming_table th#artistname, #wanted_table th#artistname
{
min-width: 150px;
text-align: center;
}
#track_table th#duration {
min-width: 100px;
text-align: center;
width: 175px;
}
#track_table td#duration, #upcoming_table td#select, #upcoming_table td#status, #wanted_table td#select, #wanted_table td#status {
text-align: center;
vertical-align: middle;
}
#upcoming_table, #wanted_table {
td#albumart {
img {
@@ -1185,7 +1463,8 @@ div#albumheader .albuminfo li span, div#artistheader h3 span {
text-align: center;
vertical-align: middle;
}
#upcoming_table td#type, #wanted_table td#type, #searchresults_table td#score {
#upcoming_table td#type, #wanted_table td#type
{
min-width: 75px;
text-align: center;
vertical-align: middle;