From 73890f39b950bb18c48b1e92f1d08d78785f89de Mon Sep 17 00:00:00 2001 From: Matthieu Lalonde Date: Fri, 9 Nov 2012 13:00:35 -0500 Subject: [PATCH] More CSS and selectors cleanup --- resources/css/app.css | 25 ++++++------ resources/css/player.css | 53 +++++++++++--------------- resources/templates/player/layout.html | 14 +++---- 3 files changed, 42 insertions(+), 50 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 3c6beeb..24e4bc8 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -433,23 +433,12 @@ div.overlay > div { z-index: 1001; } - -div#screen, -div#screen canvas#processcanvas { - width : 512px; - height : 512px; - top: 0; - margin: 0 auto; - position : absolute; - z-index : 2000; -} - .icon-loading { display: inline-block; width: 14px; height: 14px; margin-top: 1px; - *margin-right: .3em; + margin-right: .3em; line-height: 14px; vertical-align: text-top; background-repeat: no-repeat; @@ -493,6 +482,8 @@ div#screen canvas#processcanvas { .btn-primary { -webkit-animation: pulse-btn 2s infinite alternate; -moz-animation: pulse-btn 2s infinite alternate; + -ms-animation: pulse-btn 2s infinite alternate; + animation: pulse-btn 2s infinite alternate; } .btn-primary:hover, @@ -500,7 +491,9 @@ div#screen canvas#processcanvas { .btn-primary:active, .btn-primary.active { -webkit-animation: none; + -ms-animation: none; -moz-animation: none; + animation: none; opacity: 1; } @@ -512,6 +505,8 @@ div.drag-table-item table tr.selected td { .droppable-hover { -webkit-animation: pulse 1s infinite alternate; -moz-animation: pulse 1s infinite alternate; + -ms-animation: pulse 1s infinite alternate; + animation: pulse 1s infinite alternate; opacity: 0; color: #FFF; background-color: #4966B1;/* Old browsers */ @@ -522,4 +517,8 @@ div.drag-table-item table tr.selected td { background: -ms-linear-gradient(top, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* IE10+ */ background: linear-gradient(to bottom, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */ -} \ No newline at end of file +} + +table tbody tr.itemplaying.itempaused td:first-child span { + background-image: url('../img/playicon.png'); +} diff --git a/resources/css/player.css b/resources/css/player.css index c93b419..07b6190 100644 --- a/resources/css/player.css +++ b/resources/css/player.css @@ -1,7 +1,7 @@ body > div.ui-layout-north > div:last-child { margin: 6px auto 0 auto; - background: transparent url('../img/player_background.png') repeat-x; + background: url('../img/player_background.png') repeat-x left bottom; height: 40px; width: 450px; border: 1px solid #6B6D5E; @@ -86,7 +86,7 @@ body > .ui-layout-north > div:first-child { margin-left: 25px; } -body > .ui-layout-north > div:first-child #buttonPlay { +body > .ui-layout-north > div:first-child .buttonPlay { float: left; clear: none; display: block; @@ -96,17 +96,17 @@ body > .ui-layout-north > div:first-child #buttonPlay { margin-right: 4px; background: transparent url('../img/button_play.png') no-repeat left top; } -body > .ui-layout-north > div:first-child #buttonPlay.playing { +body > .ui-layout-north > div:first-child .buttonPlay.playing { background-image: url('../img/button_pause.png'); } -body > .ui-layout-north > div:first-child #buttonPlay.stopped { +body > .ui-layout-north > div:first-child .buttonPlay.stopped { background-image: url('../img/button_stop.png'); } -body > .ui-layout-north > div:first-child #buttonVolume, -body > .ui-layout-north > div:first-child #buttonPrev, -body > .ui-layout-north > div:first-child #buttonNext { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input, +body > .ui-layout-north > div:first-child .buttonPrev, +body > .ui-layout-north > div:first-child .buttonNext { float: left; clear: none; display: block; @@ -115,20 +115,18 @@ body > .ui-layout-north > div:first-child #buttonNext { margin-top: 3px; } -body > .ui-layout-north > div:first-child #buttonPrev { +body > .ui-layout-north > div:first-child .buttonPrev { background: url('../img/button_prev.png') no-repeat left top; } -body > .ui-layout-north > div:first-child #buttonNext { +body > .ui-layout-north > div:first-child .buttonNext { background: url('../img/button_next.png') no-repeat left top; } -body > .ui-layout-north > div:first-child #buttonNext:active, -body > .ui-layout-north > div:first-child #buttonPrev:active, -body > .ui-layout-north > div:first-child #buttonPlay:active, -body > .ui-layout-north > div:first-child #buttonNext.disabled:active, -body > .ui-layout-north > div:first-child #buttonPrev.disabled:active, -body > .ui-layout-north > div:first-child #buttonPlay.disabled:active { +body > .ui-layout-north > div:first-child .buttonNext:active, +body > .ui-layout-north > div:first-child .buttonPrev:active, +body > .ui-layout-north > div:first-child .buttonPlay:active, +body > .ui-layout-north > div:first-child .disabled:active { background-position: left bottom; } @@ -164,19 +162,19 @@ progress#daaprPlayerProgress span { padding: 0; } */ -#volumeWrapper { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper { float: left; clear: none; margin-left: 25px; margin-top: 16px; } -#volumeWrapper input#buttonVolume { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input { float: left; clear: none; - vertical-align: bottom; -moz-border-radius: 6px; -webkit-border-radius: 6px; + border-radius: 6px; /*background: url('../img/volume_bg.png') repeat-x;*/ display: block; height: 6px; @@ -190,13 +188,14 @@ progress#daaprPlayerProgress span { margin-top: 2px; } -#volumeWrapper input#buttonVolume, -#volumeWrapper input#buttonVolume span { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input/*, +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span*/ { -moz-border-radius: 6px; -webkit-border-radius: 6px; + border-radius: 6px; } /* -#volumeWrapper progress#buttonVolume span { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span { background: url('../img/volume_fg.png') repeat-x; display: block; height: 6px; @@ -205,13 +204,12 @@ progress#daaprPlayerProgress span { padding: 0; } -#volumeWrapper progress#buttonVolume span a { +body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span a { display: none; } */ -#volumeWrapper a#buttonVolDown { - vertical-align: top; +body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:first-child { display:block; float: left; clear: left; @@ -221,8 +219,7 @@ progress#daaprPlayerProgress span { } -#volumeWrapper a#buttonVolUp { - vertical-align: top; +body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:last-child { display:block; float: left; clear: right; @@ -241,7 +238,3 @@ table tbody tr.itemplaying td:first-child span { height: 12px; line-height: 14px; } - -table tbody tr.itemplaying.itempaused td:first-child span { - background-image: url('../img/playicon.png'); -} diff --git a/resources/templates/player/layout.html b/resources/templates/player/layout.html index ffcbc11..0a5431f 100644 --- a/resources/templates/player/layout.html +++ b/resources/templates/player/layout.html @@ -1,11 +1,11 @@
- - - -
- - - + + + +
+ + +