mirror
/
Sonarr
mirror of https://github.com/Sonarr/Sonarr
1
0
Fork 0
Code Issues Releases Wiki Activity

added prefixer.less

This commit is contained in:
kay.one 2013-06-25 22:42:44 -07:00
parent ab28b50c7e
commit 3b80d59197
8 changed files with 483 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Gruntfile.js
View File

@ -33,7 +33,8 @@ module.exports = function (grunt) {
'UI/Content/Messenger/messenger.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css',
'UI/Content/Messenger/messenger.future.css' : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css',
'UI/Content/bootstrap.toggle-switch.css' : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css'
'UI/Content/bootstrap.toggle-switch.css' : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css',
'UI/Content/prefixer.less' : 'http://raw.github.com/JoelSutherland/LESS-Prefixer/master/prefixer.less'
},
clean: {
@ -41,6 +42,14 @@ module.exports = function (grunt) {
},
less : {
options:{
dumpLineNumbers : 'false',
compress : false,
yuicompress : false,
ieCompat : false
},
bootstrap: {
src : "UI/Content/bootstrap/bootstrap.less",
dest: "_output/UI/Content/bootstrap.css"

81
UI/AddSeries/addSeries.less
View File

@ -2,79 +2,78 @@
@import "../shared/Styles/clickable.less";
.result-list {
font-size: 14px;
text-align: left;
padding-bottom: 30px;
font-size : 14px;
text-align : left;
padding-bottom : 30px;
}
.existing-root-folder-view {
h1 {
padding: 10px 0 20px 0;
padding : 10px 0 20px 0;
}
}
.add-series-import-btn {
margin: 0px 40px;
width: 1080px;
margin : 0px 40px;
width : 1080px;
}
.add-series-search {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 20px;
margin-top : 20px;
margin-bottom : 20px;
padding-left : 20px;
*[class*='icon-'] {
font-size: 28px;
height: 30px;
width: 40px;
padding-top: 14px;
font-size : 28px;
height : 30px;
width : 40px;
padding-top : 14px;
}
input {
height: 50px;
height : 50px;
}
}
.folder-name-matches {
padding-left: 20px;
padding-top: 10px;
padding-left : 20px;
padding-top : 10px;
}
.add-series-poster {
min-width: 138px;
min-height: 203px;
max-width: 138px;
max-height: 203px;
min-width : 138px;
min-height : 203px;
max-width : 138px;
max-height : 203px;
}
.unmapped-folder-view {
.card;
margin-top: 20px;
padding: 20px;
margin-top : 20px;
padding : 20px;
.folder-header {
font-weight: 300;
font-weight : 300;
select {
margin-bottom: 0;
font-size: 16px;
margin-bottom : 0;
font-size : 16px;
}
input {
margin-bottom: 0;
margin-bottom : 0;
}
}
}
.search-item {
padding-bottom: 20px;
padding-bottom : 20px;
a {
color: #343434;
color : #343434;
}
a:hover {
text-decoration: none;
text-decoration : none;
}
select {
font-size: 16px;
font-size : 16px;
}
}
@ -83,20 +82,20 @@
}
.new-series-overview {
text-overflow: ellipsis;
white-space: pre-line;
overflow: hidden;
height: 125px;
text-overflow : ellipsis;
white-space : pre-line;
overflow : hidden;
height : 125px;
}
.new-series-add {
margin-left: 20px;
margin-left : 20px;
}
.new-series-loadmore {
.loadmore {
.clickable;
font-size: 30px;
font-weight: 300;
padding-top: 10px;
padding-bottom: 10px;
font-size : 30px;
font-weight : 300;
padding-top : 10px;
padding-bottom : 10px;
}

12
UI/Content/Backgrid/paginator.less
View File

@ -1,15 +1,11 @@
@import "/content/prefixer";
.backgrid-paginator {
text-align : center;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
border-top : none;
-webkit-border-radius : 0 0 4px 4px;
-moz-border-radius : 0 0 4px 4px;
border-radius : 0 0 4px 4px;
.box-sizing(border-box);
.border-radios(0 0 4px 4px);
ul {
display : inline-block;

6
UI/Content/base.less
View File

@ -8,6 +8,7 @@
@import "menu";
@import "backgrid/backgrid";
@import "../shared/styles/clickable";
@import "/content/prefixer";
.progress {
width : 125px;
@ -38,7 +39,6 @@
box-shadow : none;
}
.line &>[class^="icon-"], .line &>[class*=" icon-"] {
margin-top : 1em;
height : 1em;
@ -81,10 +81,10 @@
&:hover {
text-decoration : none;
opacity : 0.4;
.opacity (0.4);
}
opacity : 0.2;
.opacity (0.2);
position : fixed;
bottom : 50px;
right : 50px;

16
UI/Content/menu.less
View File

@ -1,22 +1,24 @@
#main-menu-region {
@import "/content/prefixer";
#main-menu-region {
i:before {
font-size: 35px;
font-size : 35px;
}
i {
width: 40px;
width : 40px;
}
}
#in-sub-nav li a {
color: #b9b9b9;
color : #b9b9b9;
}
#in-sub-nav {
margin-bottom: 80px;
margin-bottom : 80px;
}
.backdrop #in-sub-nav {
background-color: #000000;
opacity: 0.85;
background-color : #000000;
.opacity(0.85);
}

336
UI/Content/prefixer.less Normal file
View File

@ -0,0 +1,336 @@
//---------------------------------------------------
// LESS Prefixer
//---------------------------------------------------
//
// All of the CSS3 fun, none of the prefixes!
//
// As a rule, you can use the CSS properties you
// would expect just by adding a '.':
//
// box-shadow => .box-shadow(@args)
//
// Also, when shorthand is available, arguments are
// not parameterized. Learn CSS, not LESS Prefixer.
//
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// .animation(@args)
// .animation-delay(@delay)
// .animation-direction(@direction)
// .animation-duration(@duration)
// .animation-iteration-count(@count)
// .animation-name(@name)
// .animation-play-state(@state)
// .animation-timing-function(@function)
// .background-size(@args)
// .border-radius(@args)
// .box-shadow(@args)
// .inner-shadow(@args) *
// .box-sizing(@args)
// .border-box() *
// .content-box() *
// .columns(@args)
// .column-count(@count)
// .column-gap(@gap)
// .column-rule(@args)
// .column-width(@width)
// .gradient(@default,@start,@stop) *
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .opacity(@factor)
// .transform(@args)
// .rotate(@deg)
// .scale(@factor)
// .translate(@x,@y)
// .translate3d(@x,@y,@z)
// .translateHardware(@x,@y) *
// .text-shadow(@args)
// .transition(@args)
// .transition-delay(@delay)
// .transition-duration(@duration)
// .transition-property(@property)
// .transition-timing-function(@function)
//
//
//
// Credit to LESS Elements for the motivation and
// to CSS3Please.com for implementation.
//
// Copyright (c) 2012 Joel Sutherland
// MIT Licensed:
// http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------
// Animation
.animation(@args) {
-webkit-animation: @args;
-moz-animation: @args;
-ms-animation: @args;
-o-animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-moz-animation-direction: @direction;
-ms-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-moz-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
-ms-animation-name: @name;
-o-animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
-moz-animation-play-state: @state;
-ms-animation-play-state: @state;
-o-animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
-ms-animation-timing-function: @function;
-o-animation-timing-function: @function;
}
// Background Size
.background-size(@args) {
-webkit-background-size: @args;
-moz-background-size: @args;
background-size: @args;
}
// Border Radius
.border-radius(@args) {
-webkit-border-radius: @args;
-moz-border-radius: @args;
border-radius: @args;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Box Shadows
.box-shadow(@args) {
-webkit-box-shadow: @args;
-moz-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
}
// Box Sizing
.box-sizing(@args){
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
}
// Columns
.columns(@args){
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width){
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
.column-rule(@args){
-webkit-column-rule: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}
// Gradients
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
// Opacity
.opacity(@factor){
opacity: @factor;
@iefactor: @factor*100;
filter: alpha(opacity=@iefactor);
}
// Text Shadow
.text-shadow(@args){
text-shadow: @args;
}
// Transforms
.transform(@args) {
-webkit-transform: @args;
-moz-transform: @args;
-ms-transform: @args;
-o-transform: @args;
transform: @args;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y){
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-moz-transform: translate3d(@x,@y,0);
}
// Transitions
.transition(@args:200ms) {
-webkit-transition: @args;
-moz-transition: @args;
-o-transition: @args;
transition: @args;
}
.transition-delay(@delay:0) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
-webkit-transition-duration: @duration;
-moz-transition-duration: @duration;
-o-transition-duration: @duration;
transition-duration: @duration;
}
.transition-property(@property:all) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-o-transition-property: @property;
transition-property: @property;
}
.transition-timing-function(@function:ease) {
-webkit-transition-timing-function: @function;
-moz-transition-timing-function: @function;
-o-transition-timing-function: @function;
transition-timing-function: @function;
}

149
UI/Series/series.less
View File

@ -1,155 +1,152 @@
@import "../Shared/Styles/card.less";
@import "../Shared/Styles/clickable.less";
@import "/content/prefixer";
.series-item {
padding-bottom: 30px;
padding-bottom : 30px;
:hover {
text-decoration: none;
text-decoration : none;
}
h2 {
margin-top: 0px;
margin-top : 0px;
}
a {
color: #000000;
color : #000000;
}
}
.series-page-header {
background: #000000;
color: #ffffff;
opacity: 0.9;
padding: 30px 30px;
margin: 50px 10px;
opacity: 0.9;
background : #000000;
color : #ffffff;
.opacity(0.9);
padding : 30px 30px;
margin : 50px 10px;
}
.series-season {
.card;
margin: 80px 10px;
padding: 20px 40px;
opacity: 0.9;
margin : 80px 10px;
padding : 20px 40px;
.opacity(0.9);
}
.series-posters {
list-style-type: none;
list-style-type : none;
li {
display: inline-block;
vertical-align: top;
display : inline-block;
vertical-align : top;
}
.series-posters-item {
.card;
.clickable;
margin-bottom: 20px;
height: 295px;
margin-bottom : 20px;
height : 295px;
.center {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
display : block;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.progress {
left: 22px;
margin-top: 5px;
left : 22px;
margin-top : 5px;
}
.title {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
position : absolute;
left : -10000px;
top : auto;
width : 1px;
height : 1px;
overflow : hidden;
}
.labels {
display: inline-block;
opacity: 0.75;
width: 170px;
display : inline-block;
.opacity(0.75);
width : 170px;
:hover {
cursor: default;
cursor : default;
}
.label {
margin-top: 3px;
display: block;
margin-top : 3px;
display : block;
}
.tooltip {
opacity: 1;
.opacity(1);
}
}
}
.series-poster-container {
position: relative;
overflow: hidden;
display: inline-block;
position : relative;
overflow : hidden;
display : inline-block;
.ended-banner {
color: #eeeeee;
background-color: #b94a48;
-moz-box-shadow: 2px 2px 20px #888888;
-moz-transform: rotate(45deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
position: absolute;
width: 300px;
top: 175px;
left: -122px;
text-align: center;
opacity: 0.9;
color : #eeeeee;
background-color : #b94a48;
.box-shadow(2px 2px 20px #888888);
-moz-transform-origin : 50% 50%;
-webkit-transform-origin : 50% 50%;
position : absolute;
width : 300px;
top : 175px;
left : -122px;
text-align : center;
.opacity(0.9);
.transform(rotate(45deg));
}
.series-controls {
position: absolute;;
top: 0px;
overflow: hidden;
background-color: #eeeeee;
width: 100%;
text-align: right;
padding-right: 20px;
opacity: 0.8;
display: none;
position : absolute;;
top : 0px;
overflow : hidden;
background-color : #eeeeee;
width : 100%;
text-align : right;
padding-right : 20px;
.opacity(0.8);
display : none;
}
.series-poster {
width: 168px;
width : 168px;
}
}
}
.series-detail-overview {
margin-bottom: 50px;
margin-bottom : 50px;
}
@import "../shared/Styles/clickable.less";
.series-season {
.episode-number-cell {
width: 22px;
width : 22px;
}
.episode-air-date-cell {
width: 150px;
width : 150px;
}
.episode-status-cell {
width: 100px;
width : 100px;
}
.episode-title-cell {
cursor: pointer;
cursor : pointer;
}
}
@ -157,23 +154,23 @@
.episode-overview {
font-style: italic;
font-style : italic;
}
.episode-file-info {
margin-top: 30px;
font-size: 12px;
margin-top : 30px;
font-size : 12px;
}
}
.season-grid {
.toggle-cell {
width: 10px;
width : 10px;
}
}
.season-search {
.clickable;
font-size: 24px;
font-size : 24px;
}

16
UI/Shared/Styles/card.less
View File

@ -1,10 +1,10 @@
@import "/Content/prefixer";
.card() {
margin :10px;
background-color: #ffffff;
padding: 10px;
box-shadow: 0px 0px 10px 1px #e1e1e1;
color: #444444;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin : 10px;
background-color : #ffffff;
padding : 10px;
color : #444444;
.box-shadow( 0px 0px 10px 1px #e1e1e1);
.border-radius(3px);
}