From 3b80d591970c50742100ea90be288e8f27e43414 Mon Sep 17 00:00:00 2001 From: "kay.one" Date: Tue, 25 Jun 2013 22:42:44 -0700 Subject: [PATCH] added prefixer.less --- Gruntfile.js | 11 +- UI/AddSeries/addSeries.less | 81 ++++--- UI/Content/Backgrid/paginator.less | 12 +- UI/Content/base.less | 6 +- UI/Content/menu.less | 16 +- UI/Content/prefixer.less | 336 +++++++++++++++++++++++++++++ UI/Series/series.less | 149 +++++++------ UI/Shared/Styles/card.less | 16 +- 8 files changed, 483 insertions(+), 144 deletions(-) create mode 100644 UI/Content/prefixer.less diff --git a/Gruntfile.js b/Gruntfile.js index 049f1ef50..0da441c81 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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" diff --git a/UI/AddSeries/addSeries.less b/UI/AddSeries/addSeries.less index 0619751bd..6525ae417 100644 --- a/UI/AddSeries/addSeries.less +++ b/UI/AddSeries/addSeries.less @@ -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; } diff --git a/UI/Content/Backgrid/paginator.less b/UI/Content/Backgrid/paginator.less index 84470e588..369e333f9 100644 --- a/UI/Content/Backgrid/paginator.less +++ b/UI/Content/Backgrid/paginator.less @@ -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; diff --git a/UI/Content/base.less b/UI/Content/base.less index 9f6babd43..bada8b3b0 100644 --- a/UI/Content/base.less +++ b/UI/Content/base.less @@ -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; diff --git a/UI/Content/menu.less b/UI/Content/menu.less index f268c0eb8..aeacc6c22 100644 --- a/UI/Content/menu.less +++ b/UI/Content/menu.less @@ -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); } diff --git a/UI/Content/prefixer.less b/UI/Content/prefixer.less new file mode 100644 index 000000000..4a6b8d6bc --- /dev/null +++ b/UI/Content/prefixer.less @@ -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; +} + diff --git a/UI/Series/series.less b/UI/Series/series.less index c14f38e9b..70f63a575 100644 --- a/UI/Series/series.less +++ b/UI/Series/series.less @@ -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; } diff --git a/UI/Shared/Styles/card.less b/UI/Shared/Styles/card.less index 94883fe73..ef1122d69 100644 --- a/UI/Shared/Styles/card.less +++ b/UI/Shared/Styles/card.less @@ -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); }