--- a/integration/css/common.css Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/css/common.css Mon Nov 05 18:57:37 2012 +0100
@@ -84,6 +84,22 @@
margin-bottom: 1px;
}
/* header */
+.title-video-wrap{
+ width: 460px;
+}
+.title-video-wrap a{
+ position: absolute;
+ top: 10px;
+ left: 0;
+ font-size: 18px;
+ font-weight: bold;
+ color: #30036d;
+ text-decoration: underline;
+ background-image: url(../img/pencil-icon.png);
+ background-repeat: no-repeat;
+ background-position: right 2px;
+ padding-right: 20px;
+}
.title-header{
width: 460px;
float: left;
@@ -358,4 +374,583 @@
.pagination a.active{
color: #de2500;
text-decoration: none;
-}
\ No newline at end of file
+}
+
+/* content */
+.left-content,
+.right-content{
+ padding-top: 8px;
+ float: left;
+}
+.left-content h2,
+.right-content h2{
+ padding: 6px 0;
+ margin-bottom: 14px;
+ border-bottom: 1px solid #333333;
+ color: #30036d;
+ font-size: 18px;
+ font-weight: 600;
+}
+/* left-content */
+.left-content{
+ width: 630px;
+ margin-right: 20px;
+}
+/* right-content */
+.right-content{
+ width: 310px;
+}
+/* list-video */
+.list-video {
+ overflow: hidden;
+ overflow-y: auto;
+ height: 680px;
+}
+.item-video {
+ margin-bottom: 1px;
+ cursor: pointer;
+ padding: 5px 10px 5px 10px;
+ clear: both;
+ width: auto;
+ min-height: 62px;
+ display: block;
+}
+.item-video img{
+ float: left;
+ margin-right: 4px;
+ max-width: 80px;
+ max-height: 60px;
+ box-shadow: 2px 2px 2px #333333;
+}
+.item-video .video-info{
+ display: block;
+ margin-left: 88px;
+}
+.item-video .title-video{
+ font-size: 13px;
+ font-weight: 600;
+ color: #30036d;
+ display: block;
+ margin-bottom: 1px;
+}
+.item-video .author{
+ font-size: 11px;
+ display: block;
+ margin-bottom: 1px;
+}
+.item-video .time-length{
+ font-size: 12px;
+ font-weight: 600;
+ display: block;
+}
+.item-video .time-length span{
+ color: #de2500;
+}
+.item-video .number{
+ color: #FFF;
+ font-size: 10px;
+ text-align: center;
+ width:15px;
+ height: 15px;
+ line-height: 15px;
+ background-color: #ff00fc;
+ position: absolute;
+ display: block;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ top: 54px;
+ left: 78px;
+}
+.item-video .subtitle{
+ margin-bottom: 2px;
+ display: block;
+ color: #de2500;
+ font-size: 11px;
+}
+.item-video .duration{
+ color: #7628df;
+ font-size: 12px;
+ font-weight: 600;
+ display: block;
+}
+/* frise */
+.frise{
+ height: 22px;
+ overflow: hidden;
+ position: relative;
+ border: 1px solid #333333;
+}
+.frise-segments,.frise-indications{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.frise-indications{
+ z-index: 2;
+}
+
+
+.aucun-segment{
+ font-weight: 600;
+ font-style: italic;
+ text-align: center;
+ line-height: 20px;
+ width: 100%;
+ z-index:0;
+ background: #CCCCCC;
+}
+.frise-segment{
+ height: 22px;
+ position: absolute;
+ background-image: url(../img/border-right-segment.png);
+ background-repeat: repeat-y;
+ background-position: right top;
+ -moz-box-shadow: inset 0px 1px 1px 0px #666;
+ -webkit-box-shadow: inset 0px 1px 1px 0px #666;
+ box-shadow: inset 0px 1px 1px 0px #666;
+}
+.frise-segment:first-child{
+ -moz-box-shadow: inset 1px 1px 1px 0px #666;
+ -webkit-box-shadow: inset 1px 1px 1px 0px #666;
+ box-shadow: inset 1px 1px 1px 0px #666;
+}
+.frise-segment:last-child{
+ background-image: none;
+}
+.frise-indication{
+ height: 22px;
+ line-height: 22px;
+ display: inline-block;
+ position: absolute;
+ color: #FFF;
+ top:0;
+ left: 0px;
+ font-size: 10px;
+ width: 30px;
+ text-align: center;
+ background: url(../img/bg-indication.png) 15px 0 no-repeat;
+ margin-left: -15px;
+}
+.frise-position {
+ width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC;
+}
+/* col-middle - bloc-segmentation - popin.segmentation */
+
+.pointer-padder {
+ left: 5px;
+ position: absolute;
+ right: 5px;
+ top: 0;
+}
+
+.pointer-padder .pointer {
+ top: 0; margin-left: -10px;
+}
+
+.segment-info {
+ padding-top: 12px;
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+}
+
+.segmentation h2{
+ font-size: 14px;
+ font-weight: 600;
+ color:#de2500;
+ margin-bottom: 10px;
+}
+
+.time-tangle {
+ color: #7628df; cursor: w-resize; position: relative;
+}
+.time-tangle:hover,
+.time-tangle.active {
+ color: #FF00FC; border-bottom: 1px dashed #7628df;
+}
+.time-tangle:hover:after,
+.time-tangle.active:after {
+ color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px;
+ margin-left: -80px; font-size: 12px; text-align: center;
+ content: "glisser pour modifier"
+}
+
+.time-tangle.deactivate:hover {
+ border: none; color: #7628DF;
+}
+
+.time-tangle.deactivate:hover:after {
+ display: none;
+}
+
+.segmentation form{
+ overflow: hidden;
+}
+.form-segment-left,
+.form-segment-right{
+ float: left;
+}
+.segmentation .form-segment-left{
+ width: 228px;
+}
+.segmentation form p{
+ margin-bottom: 8px;
+}
+.segmentation label{
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+.segmentation textarea{
+ width: 200px;
+ height: 66px;
+ max-width: 200px;
+ font-size: 12px;
+}
+.segmentation input[type=text]{
+ font-size: 12px;
+ width: 200px;
+ height: 20px;
+}
+
+.add-segment {
+ float: right; margin: 4px 0;
+}
+.media-segments h2{
+ color: #30036d;
+ font-size: 14px;
+ font-weight: 600;
+ margin: 10px 8px 2px;
+}
+
+.media-segment {
+ height: 8px;
+ margin: 8px 6px 0;
+ background-color: #b6b8b8;
+ position: relative;
+}
+.media-section {
+ position: absolute;
+}
+.media-segment-section {
+ top: 0; height: 8px;
+}
+
+.media-current-section {
+ background: url(../img/pinstripe-purple.png);
+ top: -2px; height: 2px;
+}
+
+.media-current-section-inner {
+ background: url(../img/pinstripe-purple.png);
+ margin-top: 10px; height: 2px;
+}
+.media-segment .pointer{
+ margin-left: 140px
+}
+.media-segment-popin {
+ padding-top: 12px; overflow: hidden;
+ top: 2px; width: 300px; margin-left: -151px;
+ display: none;
+}
+.media-segment-popin h3{
+ padding: 0;
+ color: #de2500;
+ margin-bottom: 4px;
+ font-weight: 600;
+}
+.media-segment-popin p{
+ margin-right: 155px;
+ font-size: 12px;
+}
+.media-segment-popin span{
+ color: #7628df;
+}
+.reprendre-segment{
+ float: right;
+ display: block;
+}
+/* popin - frise-description */
+
+.annotation-title {
+ color: #de2500;
+ font-size: 14px;
+ font-weight: bold;
+}
+.annotation-media-title{
+ font-size: 12px;
+ color: #30036d;
+ font-weight: 600;
+}
+.annotation-time {
+ color: #7628DF;
+}
+.mashup-description table{
+ font-size: 12px;
+}
+.mashup-description th{
+ text-align: left;
+ font-weight: 600;
+ display: block;
+ min-width: 75px;
+}
+.mashup-description td{
+ line-height: 15px;
+ padding-left: 2px;
+}
+.mashup-description th,
+.mashup-description td,
+.mashup-description h2{
+ padding-bottom: 8px;
+}
+.mashup-description .tools{
+ float: right;
+}
+
+
+.widget {
+ position: relative;
+}
+
+/* Styles from Metadataplayer */
+
+/* Slider Widget */
+
+.Ldt-Slider-Container {
+ background: #969696;
+ background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+ background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+ border-top: 1px solid #969696;
+ height: 4px;
+}
+
+.Ldt-Slider {
+ border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8;
+}
+
+.Ldt-Slider .ui-slider-handle {
+ border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
+}
+
+.Ldt-Slider .ui-slider-range {
+ background: #747474;
+}
+
+.Ldt-Slider-Time {
+ position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
+ font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
+ display: none; text-align: center; font-weight: bold;
+}
+
+/* Controller Widget */
+
+.Ldt-Ctrl {
+ font-size: 10px;
+ background:url('../img/player_gradient.png') repeat-x transparent ;
+ height: 25px;
+ border: 1px solid #969696;
+ position: relative;
+}
+
+.Ldt-Ctrl-Left {
+ float:left; width: 300px;
+}
+
+.Ldt-Ctrl-Right {
+ float: right;
+}
+
+.Ldt-Ctrl-button {
+ float: left;
+ width: 30px; height: 25px;
+ background: url('../img/player-sprites.png');
+ cursor: pointer;
+}
+
+.Ldt-Ctrl-spacer {
+ float: left; width: 1px; height: 25px; background: #969696;
+}
+
+.Ldt-Ctrl-Play {
+ margin: 0 15px;
+}
+
+.Ldt-Ctrl-Play-PlayState {
+ background-position: 0 0;
+}
+
+.Ldt-Ctrl-Play-PlayState:hover {
+ background-position: 0 -25px;
+}
+
+.Ldt-Ctrl-Play-PlayState:active {
+ background-position: 0 -50px;
+}
+
+.Ldt-Ctrl-Play-PauseState {
+ background-position: -30px 0;
+}
+
+.Ldt-Ctrl-Play-PauseState:hover {
+ background-position: -30px -25px;
+}
+
+.Ldt-Ctrl-Play-PauseState:active {
+ background-position: -30px -50px;
+}
+
+.Ldt-Ctrl-InOutBlock {
+ display: none;
+}
+
+.segment-mode .Ldt-Ctrl-InOutBlock {
+ display: block;
+}
+
+.Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut {
+ margin: 0 2px;
+}
+
+.Ldt-Ctrl-SetIn {
+ background-position: -60px 0;
+}
+
+.Ldt-Ctrl-SetIn:hover {
+ background-position: -60px -25px;
+}
+
+.Ldt-Ctrl-SetIn:active {
+ background-position: -60px -50px;
+}
+
+.Ldt-Ctrl-SetOut {
+ background-position: -90px 0;
+}
+
+.Ldt-Ctrl-SetOut:hover {
+ background-position: -90px -25px;
+}
+
+.Ldt-Ctrl-SetOut:active {
+ background-position: -90px -50px;
+}
+
+.Ldt-Ctrl-Time {
+ float: left;
+ margin: 7px 5px 0;
+ font-size: 12px;
+ font-family: Arial, Verdana, sans-serif;
+}
+
+.Ldt-Ctrl-Time-Elapsed {
+ float: left;
+ color: #4a4a4a;
+}
+
+.Ldt-Ctrl-Time-Separator {
+ margin: 0 4px;
+ float: left;
+}
+
+.Ldt-Ctrl-Time-Total {
+ float: left;
+ color: #b2b2b2;
+}
+
+.Ldt-Ctrl-Sound {
+ margin: 0 2px;
+}
+
+.Ldt-Ctrl-Sound-Full {
+ background-position: -120px 0;
+}
+
+.Ldt-Ctrl-Sound-Full:hover {
+ background-position: -120px -25px;
+}
+
+.Ldt-Ctrl-Sound-Full:active {
+ background-position: -120px -50px;
+}
+
+.Ldt-Ctrl-Sound-Mute {
+ background-position: -150px 0;
+}
+
+.Ldt-Ctrl-Sound-Mute:hover {
+ background-position: -150px -25px;
+}
+
+.Ldt-Ctrl-Sound-Mute:active {
+ background-position: -150px -50px;
+}
+
+.Ldt-Ctrl-Sound-Half {
+ background-position: -180px 0;
+}
+
+.Ldt-Ctrl-Sound-Half:hover {
+ background-position: -180px -25px;
+}
+
+.Ldt-Ctrl-Sound-Half:active {
+ background-position: -180px -50px;
+}
+
+.Ldt-Ctrl-Volume-Control {
+ display: none;
+ position: absolute;
+ background:url('../img/player_gradient.png') repeat-x transparent ;
+ height: 25px;
+ width: 100px; top: 25px; right: -1px; z-index: 100;
+ padding: 0 2px;
+ border: 1px solid #b6b8b8;
+}
+
+.Ldt-Ctrl-Volume-Bar {
+ height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
+}
+
+.Ldt-Ctrl-Volume-Control .ui-slider-handle {
+ width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px;
+ cursor: pointer;
+}
+
+.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
+ background: #F7268E;
+}
+
+/* Slice Widget */
+
+.Ldt-Slice {
+ border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px;
+}
+
+.Ldt-Slice .ui-slider-handle {
+ width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0;
+ background: url(../img/slice-handles.png); border-radius: 0; cursor: pointer;
+}
+
+.ui-slider-handle.Ldt-Slice-left-handle {
+ margin-left: -7px;
+}
+
+.ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active {
+ background-position: 0 -20px;
+}
+
+.ui-slider-handle.Ldt-Slice-right-handle {
+ margin-left: 0; background-position: -7px 0;
+}
+
+.ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active {
+ background-position: -7px -20px;
+}
+
+.Ldt-Slice .ui-slider-range {
+ background: url(../img/pinstripe-purple.png);
+}
--- a/integration/css/edition.css Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/css/edition.css Mon Nov 05 18:57:37 2012 +0100
@@ -8,22 +8,8 @@
}
/* header - title-video-wrap */
-.title-video-wrap{
- width: 460px;
-}
-.title-video-wrap a{
- position: absolute;
- top: 10px;
- left: 0;
- font-size: 18px;
- font-weight: bold;
- color: #30036d;
- text-decoration: underline;
- background-image: url(../img/pencil-icon.png);
- background-repeat: no-repeat;
- background-position: right 2px;
- padding-right: 20px;
-}
+
+
.title-video-wrap a:hover{
text-decoration: none;
}
@@ -122,212 +108,14 @@
display: none;
}
-/* frise */
-.frise{
- height: 22px;
- overflow: hidden;
- position: relative;
- border: 1px solid #333333;
-}
-.frise-segments,.frise-indications{
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
-}
-.frise-indications{
- z-index: 2;
-}
-.bloc-pvw .frise {
- margin: 7px 5px 2px;
-}
-.aucun-segment{
- font-weight: 600;
- font-style: italic;
- text-align: center;
- line-height: 20px;
- width: 100%;
- z-index:0;
- background: #CCCCCC;
-}
-.frise-segment{
- height: 22px;
- position: absolute;
- background-image: url(../img/border-right-segment.png);
- background-repeat: repeat-y;
- background-position: right top;
- -moz-box-shadow: inset 0px 1px 1px 0px #666;
- -webkit-box-shadow: inset 0px 1px 1px 0px #666;
- box-shadow: inset 0px 1px 1px 0px #666;
-}
-.frise-segment:first-child{
- -moz-box-shadow: inset 1px 1px 1px 0px #666;
- -webkit-box-shadow: inset 1px 1px 1px 0px #666;
- box-shadow: inset 1px 1px 1px 0px #666;
-}
-.frise-segment:last-child{
- background-image: none;
-}
-.frise-indication{
- height: 22px;
- line-height: 22px;
- display: inline-block;
- position: absolute;
- color: #FFF;
- top:0;
- left: 0px;
- font-size: 10px;
- width: 30px;
- text-align: center;
- background: url(../img/bg-indication.png) 15px 0 no-repeat;
- margin-left: -15px;
-}
-.frise-position {
- width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC;
-}
/* col-middle - bloc-segmentation */
.bloc-segmentation{
position: relative;
}
-/* col-middle - bloc-segmentation - popin.segmentation */
-
-.pointer-padder {
- left: 5px;
- position: absolute;
- right: 5px;
- top: 0;
-}
-
-.pointer-padder .pointer {
- top: 0; margin-left: -10px;
-}
-
-.segment-info {
- padding-top: 12px;
- position: relative;
- width: 100%;
- overflow: hidden;
-}
-
-.segmentation h2{
- font-size: 14px;
- font-weight: 600;
- color:#de2500;
- margin-bottom: 10px;
-}
-
-.time-tangle {
- color: #7628df; cursor: w-resize; position: relative;
-}
-.time-tangle:hover,
-.time-tangle.active {
- color: #FF00FC; border-bottom: 1px dashed #7628df;
-}
-.time-tangle:hover:after,
-.time-tangle.active:after {
- color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px;
- margin-left: -80px; font-size: 12px; text-align: center;
- content: "glisser pour modifier"
-}
-
-.time-tangle.deactivate:hover {
- border: none; color: #7628DF;
-}
-
-.time-tangle.deactivate:hover:after {
- display: none;
-}
-
-.segmentation form{
- overflow: hidden;
-}
-.form-segment-left,
-.form-segment-right{
- float: left;
-}
-.segmentation .form-segment-left{
- width: 228px;
-}
-.segmentation form p{
- margin-bottom: 8px;
-}
-.segmentation label{
- display: block;
- font-size: 12px;
- font-weight: 600;
- margin-bottom: 4px;
-}
-.segmentation textarea{
- width: 200px;
- height: 66px;
- max-width: 200px;
- font-size: 12px;
-}
-.segmentation input[type=text]{
- font-size: 12px;
- width: 200px;
- height: 20px;
-}
-
-.add-segment {
- float: right; margin: 4px 0;
-}
-.media-segments h2{
- color: #30036d;
- font-size: 14px;
- font-weight: 600;
- margin: 10px 8px 2px;
-}
-
-.media-segment {
- height: 8px;
- margin: 8px 6px 0;
- background-color: #b6b8b8;
- position: relative;
-}
-.media-section {
- position: absolute;
-}
-.media-segment-section {
- top: 0; height: 8px;
-}
-
-.media-current-section {
- background: url(../img/pinstripe-purple.png);
- top: -2px; height: 2px;
-}
-
-.media-current-section-inner {
- background: url(../img/pinstripe-purple.png);
- margin-top: 10px; height: 2px;
-}
-.media-segment .pointer{
- margin-left: 140px
-}
-.media-segment-popin {
- padding-top: 12px; overflow: hidden;
- top: 2px; width: 300px; margin-left: -151px;
- display: none;
-}
-.media-segment-popin h3{
- padding: 0;
- color: #de2500;
- margin-bottom: 4px;
- font-weight: 600;
-}
-.media-segment-popin p{
- margin-right: 155px;
- font-size: 12px;
-}
-.media-segment-popin span{
- color: #7628df;
-}
-.reprendre-segment{
- float: right;
- display: block;
+.bloc-pvw .frise {
+ margin: 7px 5px 2px;
}
/* col-middle - bloc-vide */
.tutorial{
@@ -444,37 +232,7 @@
background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
}
-/* popin - frise-description */
-.annotation-title {
- color: #de2500;
- font-size: 14px;
- font-weight: bold;
-}
-.annotation-time {
- color: #7628DF;
-}
-.mashup-description table{
- font-size: 12px;
-}
-.mashup-description th{
- text-align: left;
- font-weight: 600;
- display: block;
- min-width: 75px;
-}
-.mashup-description td{
- line-height: 15px;
- padding-left: 2px;
-}
-.mashup-description th,
-.mashup-description td,
-.mashup-description h2{
- padding-bottom: 8px;
-}
-.mashup-description .tools{
- float: right;
-}
/* tools */
.tools {
height: 17px;
@@ -528,80 +286,7 @@
.tools a.delete.disable{
background-position: -61px -16px;
}
-/* list-video */
-.list-video {
- overflow: hidden;
- overflow-y: auto;
- height: 680px;
-}
-.item-video {
- margin-bottom: 1px;
- cursor: pointer;
- padding: 5px 10px 5px 10px;
- clear: both;
- width: auto;
- min-height: 62px;
- display: block;
-}
-.item-video img{
- float: left;
- margin-right: 4px;
- max-width: 80px;
- max-height: 60px;
- box-shadow: 2px 2px 2px #333333;
-}
-.item-video .video-info{
- display: block;
- margin-left: 88px;
-}
-.item-video .title-video{
- font-size: 13px;
- font-weight: 600;
- color: #30036d;
- display: block;
- margin-bottom: 1px;
-}
-.item-video .author{
- font-size: 11px;
- display: block;
- margin-bottom: 1px;
-}
-.item-video .time-length{
- font-size: 12px;
- font-weight: 600;
- display: block;
-}
-.item-video .time-length span{
- color: #de2500;
-}
-.item-video .number{
- color: #FFF;
- font-size: 10px;
- text-align: center;
- width:15px;
- height: 15px;
- line-height: 15px;
- background-color: #ff00fc;
- position: absolute;
- display: block;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- top: 54px;
- left: 78px;
-}
-.item-video .subtitle{
- margin-bottom: 2px;
- display: block;
- color: #de2500;
- font-size: 11px;
-}
-.item-video .duration{
- color: #7628df;
- font-size: 12px;
- font-weight: 600;
- display: block;
-}
+
/* Video */
@@ -630,245 +315,3 @@
background-color: none;
}
-.widget {
- position: relative;
-}
-
-/* Styles from Metadataplayer */
-
-/* Slider Widget */
-
-.Ldt-Slider-Container {
- background: #969696;
- background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
- background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
- border-top: 1px solid #969696;
- height: 4px;
-}
-
-.Ldt-Slider {
- border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8;
-}
-
-.Ldt-Slider .ui-slider-handle {
- border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
-}
-
-.Ldt-Slider .ui-slider-range {
- background: #747474;
-}
-
-.Ldt-Slider-Time {
- position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
- font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
- display: none; text-align: center; font-weight: bold;
-}
-
-/* Controller Widget */
-
-.Ldt-Ctrl {
- font-size: 10px;
- background:url('../img/player_gradient.png') repeat-x transparent ;
- height: 25px;
- border: 1px solid #969696;
- position: relative;
-}
-
-.Ldt-Ctrl-Left {
- float:left; width: 300px;
-}
-
-.Ldt-Ctrl-Right {
- float: right;
-}
-
-.Ldt-Ctrl-button {
- float: left;
- width: 30px; height: 25px;
- background: url('../img/player-sprites.png');
- cursor: pointer;
-}
-
-.Ldt-Ctrl-spacer {
- float: left; width: 1px; height: 25px; background: #969696;
-}
-
-.Ldt-Ctrl-Play {
- margin: 0 15px;
-}
-
-.Ldt-Ctrl-Play-PlayState {
- background-position: 0 0;
-}
-
-.Ldt-Ctrl-Play-PlayState:hover {
- background-position: 0 -25px;
-}
-
-.Ldt-Ctrl-Play-PlayState:active {
- background-position: 0 -50px;
-}
-
-.Ldt-Ctrl-Play-PauseState {
- background-position: -30px 0;
-}
-
-.Ldt-Ctrl-Play-PauseState:hover {
- background-position: -30px -25px;
-}
-
-.Ldt-Ctrl-Play-PauseState:active {
- background-position: -30px -50px;
-}
-
-.Ldt-Ctrl-InOutBlock {
- display: none;
-}
-
-.segment-mode .Ldt-Ctrl-InOutBlock {
- display: block;
-}
-
-.Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut {
- margin: 0 2px;
-}
-
-.Ldt-Ctrl-SetIn {
- background-position: -60px 0;
-}
-
-.Ldt-Ctrl-SetIn:hover {
- background-position: -60px -25px;
-}
-
-.Ldt-Ctrl-SetIn:active {
- background-position: -60px -50px;
-}
-
-.Ldt-Ctrl-SetOut {
- background-position: -90px 0;
-}
-
-.Ldt-Ctrl-SetOut:hover {
- background-position: -90px -25px;
-}
-
-.Ldt-Ctrl-SetOut:active {
- background-position: -90px -50px;
-}
-
-.Ldt-Ctrl-Time {
- float: left;
- margin: 7px 5px 0;
- font-size: 12px;
- font-family: Arial, Verdana, sans-serif;
-}
-
-.Ldt-Ctrl-Time-Elapsed {
- float: left;
- color: #4a4a4a;
-}
-
-.Ldt-Ctrl-Time-Separator {
- margin: 0 4px;
- float: left;
-}
-
-.Ldt-Ctrl-Time-Total {
- float: left;
- color: #b2b2b2;
-}
-
-.Ldt-Ctrl-Sound {
- margin: 0 2px;
-}
-
-.Ldt-Ctrl-Sound-Full {
- background-position: -120px 0;
-}
-
-.Ldt-Ctrl-Sound-Full:hover {
- background-position: -120px -25px;
-}
-
-.Ldt-Ctrl-Sound-Full:active {
- background-position: -120px -50px;
-}
-
-.Ldt-Ctrl-Sound-Mute {
- background-position: -150px 0;
-}
-
-.Ldt-Ctrl-Sound-Mute:hover {
- background-position: -150px -25px;
-}
-
-.Ldt-Ctrl-Sound-Mute:active {
- background-position: -150px -50px;
-}
-
-.Ldt-Ctrl-Sound-Half {
- background-position: -180px 0;
-}
-
-.Ldt-Ctrl-Sound-Half:hover {
- background-position: -180px -25px;
-}
-
-.Ldt-Ctrl-Sound-Half:active {
- background-position: -180px -50px;
-}
-
-.Ldt-Ctrl-Volume-Control {
- display: none;
- position: absolute;
- background:url('../img/player_gradient.png') repeat-x transparent ;
- height: 25px;
- width: 100px; top: 25px; right: -1px; z-index: 100;
- padding: 0 2px;
- border: 1px solid #b6b8b8;
-}
-
-.Ldt-Ctrl-Volume-Bar {
- height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
-}
-
-.Ldt-Ctrl-Volume-Control .ui-slider-handle {
- width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px;
- cursor: pointer;
-}
-
-.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
- background: #F7268E;
-}
-
-/* Slice Widget */
-
-.Ldt-Slice {
- border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px;
-}
-
-.Ldt-Slice .ui-slider-handle {
- width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0;
- background: url(../img/slice-handles.png); border-radius: 0; cursor: pointer;
-}
-
-.ui-slider-handle.Ldt-Slice-left-handle {
- margin-left: -7px;
-}
-
-.ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active {
- background-position: 0 -20px;
-}
-
-.ui-slider-handle.Ldt-Slice-right-handle {
- margin-left: 0; background-position: -7px 0;
-}
-
-.ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active {
- background-position: -7px -20px;
-}
-
-.Ldt-Slice .ui-slider-range {
- background: url(../img/pinstripe-purple.png);
-}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/hashcut.css Mon Nov 05 18:57:37 2012 +0100
@@ -0,0 +1,74 @@
+.title-video-wrap a{
+ background-image: none;
+}
+.more-info-wrap{
+ padding-right: 10px;
+}
+.more-info{
+ text-align: left;
+}
+.more-info th{
+ font-weight: 600;
+ font-style: normal;
+ font-size: 12px;
+ width: 78px;
+}
+.more-info td{
+ padding-bottom: 12px;
+ font-size: 12px;
+}
+.more-info a{
+ text-decoration: underline;
+}
+.more-info a:hover{
+ text-decoration: none;
+}
+.info-title a{
+ color:#30036d;
+ font-size: 14px;
+ font-weight: bold;
+}
+.info-duration td{
+ color: #de2500;
+}
+.info-author a{
+ color: #7628df;
+}
+.cloner{
+ float: right;
+}
+.list-video{
+ height: 450px;
+}
+.item-video:hover,
+.item-video.active{
+ background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
+}
+.time-length{
+ margin-bottom: 5px;
+}
+.item-video .frise{
+ width: 100%;
+ height: 8px;
+ background-color: #999999;
+ display: block;
+}
+.item-video .frise{
+ border:none;
+}
+.bloc-video{
+ padding-left: 10px;
+}
+.video {
+ background: none repeat scroll 0 0 #333333;
+ height: 400px;
+ position: relative;
+ width: 620px;
+}
+.bloc-pvw{
+ margin-top: 7px;
+}
+.popin-content h2{
+ margin: 0;
+ border:none;
+}
\ No newline at end of file
--- a/integration/css/home.css Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/css/home.css Mon Nov 05 18:57:37 2012 +0100
@@ -13,26 +13,9 @@
.title-header h2 a:hover{
text-decoration: none;
}
-/* content */
-.left-content,
-.right-content{
- padding-top: 8px;
- float: left;
-}
-.left-content h2,
-.right-content h2{
- padding: 6px 0;
- margin-bottom: 14px;
- border-bottom: 1px solid #333333;
- color: #30036d;
- font-size: 18px;
- font-weight: 600;
-}
+
/* left-content */
-.left-content{
- width: 630px;
- margin-right: 20px;
-}
+
.news .video-item:nth-child(2n+2){
margin-right: 0;
}
@@ -49,9 +32,7 @@
}
/* right-content */
-.right-content{
- width: 310px;
-}
+
.definition p{
font-size: 12px;
line-height: 14px;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/hashcut.html Mon Nov 05 18:57:37 2012 +0100
@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Hashcut</title>
+ <link rel="stylesheet" href="lib/jquery-ui.css" />
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/hashcut.css" />
+ </head>
+ <body>
+ <div class="wrap">
+ <div class="wrap-header">
+ <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+ </div>
+ <div class="header">
+ <!-- popin header -->
+ <div class="popin update-title" id="update-title">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <form class="clearfix" action="#" method="">
+ <div class="form-left">
+ <p class="titre-wrap">
+ <label for="hashcut-title">Titre :</label>
+ <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
+ </p>
+ <p>
+ <label for="hashcut-tags">Tags :</label>
+ <input type="text" id="hashcut-tags" name="" value="" />
+ </p>
+ </div>
+ <p class="form-right">
+ <label for="hashcut-description">Description :</label>
+ <textarea name="" id="hashcut-description"></textarea>
+ </p>
+ </form>
+ </div>
+ </div><!-- popin update-title -->
+
+ <div class="popin user info" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Mashup75</h2>
+ <h3>mash@cinecast.fr</h3>
+ <a href="#" class="nb-hashcut">12 Hashcuts</a>
+ <p>
+ <a href="#" class="change-account button">Changer de compte</a>
+ </p>
+ </div>
+ </div><!-- popin user info-->
+
+ <div class="popin user signup" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Créer un compte :</h2>
+ <form action="#" class="signup-form">
+ <p>
+ <label for="signup-pseudo">Pseudonyme : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p >
+ <label for="signup-email">Email : </label>
+ <input type="text" id="signup-email" name="" />
+ </p>
+ <p >
+ <label for="signup-password">Mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <label for="signup-password">Confirmer le mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Créer le compte">
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user signup-->
+
+ <div class="popin user login" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Connexion :</h2>
+ <form action="#" class="login-form">
+ <p>
+ <label for="signup-pseudo">E-mail : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p >
+ <label for="signup-email">Mot de passe : </label>
+ <input type="password" id="signup-email" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Se connecter">
+ </p>
+ <p>
+ <a class="button signup-button" href="#">Créer un compte</a>
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user login-->
+
+ <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
+ <img src="img/hashcut-logo.png" alt="Hashcut" />
+ <span>Le Mashup<br />Cliquable</span>
+ </a></h1>
+ <div class="title-video-wrap">
+ <a title="Modifier le titre et la description" href="#">Hashcut sans titre</a>
+ </div>
+ <div class="profil-wrap">
+ <a href="#" class="all-hashcut">Tous les Hashcuts</a>
+ <a href="#user" class="my-profil open-popin">Mon profil</a>
+ </div>
+ </div><!-- header -->
+
+ <div class="content clearfix">
+
+ <div class="left-content">
+ <h2>Lire le Hashcut</h2>
+ <div class="bloc-video">
+ <div class="video"></div>
+ <div class="widget">
+ <div class="Ldt-Slider-Container" style="height: 6.29154px; margin-top: -2.29154px; overflow: hidden;">
+ <div class="Ldt-Slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%; height: 8.29154px; width: 8.29154px; margin-left: -5.14577px; overflow: hidden;"></a></div>
+ </div>
+ <div class="Ldt-Slider-Time" style="display: none; left: 51.5px;">07:17</div>
+
+ <div class="Ldt-Ctrl">
+ <div class="Ldt-Ctrl-Left">
+ <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-InOutBlock">
+ <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ </div>
+ </div>
+ <div class="Ldt-Ctrl-Right">
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-Time">
+ <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
+ <div class="Ldt-Ctrl-Time-Separator">/</div>
+ <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
+ </div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-TraceMe Ldt-Ctrl-Sound-Full"></div>
+ </div>
+ <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
+ <div class="Ldt-Ctrl-Volume-Bar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Volume : 100%"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"></a></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="bloc-pvw">
+ <div class="frise">
+ <div class="frise-indications"><span style="left:12.82051282051282%;" class="frise-indication">15:00</span><span style="left:25.64102564102564%;" class="frise-indication">30:00</span><span style="left:38.46153846153846%;" class="frise-indication">45:00</span><span style="left:51.28205128205128%;" class="frise-indication">1:00:00</span><span style="left:64.1025641025641%;" class="frise-indication">1:15:00</span><span style="left:76.92307692307692%;" class="frise-indication">1:30:00</span><span style="left:89.74358974358974%;" class="frise-indication">1:45:00</span></div>
+ <div class="frise-segments"><div style="background-color:#9467bd; left:0%; width:41.02564102564102%;" class="frise-segment"></div><div style="background-color:#d62728; left:41.02564102564102%; width:58.97435897435897%;" class="frise-segment"></div></div>
+ <div class="frise-position"></div>
+ </div>
+ <div class="segment-info mashup-description">
+ <div class="pointer-padder">
+ <img alt="" src="img/popin-triangle.png" class="pointer" style="left: 50%;">
+ </div>
+ <div class="popin-content">
+ <h2><span class="annotation-title">Segment sans titre</span></h2>
+ <table>
+ <tbody>
+ <tr>
+ <th>Extrait de :</th>
+ <td><span class="annotation-media-title">Firminy, le maire et l'architecte</span> (<span class="annotation-time annotation-begin">00:00</span> - <span class="annotation-time annotation-end">53:50</span>)</td>
+ </tr>
+ <tr>
+ <th>Description :</th>
+ <td><span class="annotation-description">Extrait de « Firminy, le maire et l'architecte »</span></td>
+ </tr>
+ <tr>
+ <th>Tags :</th>
+ <td><span class="annotation-tags">(fonctionnalité à venir)</span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div><!-- bloc-pvw -->
+ </div><!-- bloc-video -->
+ </div><!-- left-content -->
+
+ <div class="right-content">
+ <h2>Plus d’informations</h2>
+ <div class="more-info-wrap clearfix">
+ <table class="more-info ">
+ <tbody>
+ <tr class="info-title">
+ <th>Titre :</th>
+ <td><a href="#">Titre du Hashcut</a></td>
+ </tr>
+ <tr class="info-duration">
+ <th>Durée :</th>
+ <td>17:03</td>
+ </tr>
+ <tr class="info-author">
+ <th>Auteur : </th>
+ <td><a href="#">Hashcutter75</a></td>
+ </tr>
+ <tr class="info-description">
+ <th>Description : </th>
+ <td> An Atlas V rocket lofted the Juno spacecraft toward Jupiter from Space Launch Complex-41. The 4-ton Juno spacecraft will take five years to reach Jupiter on a mission to study its structure and decipher its history.</td>
+ </tr>
+ <tr class="info-tags">
+ <th>Tags : </th>
+ <td>Mashup, Création, Art</td>
+ </tr>
+ </tbody>
+ </table>
+ <a href="#" class="button cloner">Cloner le Hashcut</a>
+ </div>
+ <h2>Médias utilisés dans le Hashcut</h2>
+ <ul class="list-video">
+ <li class="item-video">
+ <img alt="Roms en errance" src="thumbnails/roms-80.jpg">
+ <span class="video-info">
+ <span class="title-video">Roms en errance</span>
+ <span class="author">Par : Bernard Kleindienst</span>
+ <span class="time-length">Durée : <span>1:09:00</span></span>
+ <span class="frise">
+ <div class="frise-segments">
+ <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div>
+ </div>
+ </span>
+ </span>
+ </li>
+ <li class="item-video">
+ <img alt="Roms en errance" src="thumbnails/roms-80.jpg">
+ <span class="video-info">
+ <span class="title-video">Roms en errance</span>
+ <span class="author">Par : Bernard Kleindienst</span>
+ <span class="time-length">Durée : <span>1:09:00</span></span>
+ <span class="frise">
+ <div class="frise-segments">
+ <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div>
+ </div>
+ </span>
+ </span>
+ </li>
+ </ul>
+ </div><!-- right-content -->
+
+
+
+ </div><!-- content -->
+
+ <div class="footer clearfix">
+ <ul class="links-left">
+ <li><a href="#">Mentions légales</a></li>
+ <li><a href="#">Contacts</a></li>
+ </ul>
+ <ul class="links-right">
+ <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
+ <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+ <li>© 2012</li>
+ </ul>
+ </div><!-- footer -->
+ </div><!-- wrap -->
+ <!-- JavaScript -->
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="lib/underscore-min.js"></script>
+ <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+ <script type="text/javascript" src="lib/raphael-min.js"></script>
+ <script type="text/javascript" src="js/init.js"></script>
+ <script type="text/javascript" src="js/medialist-serializer.js"></script>
+ <script type="text/javascript" src="js/model.js"></script>
+ <script type="text/javascript" src="js/editor.js"></script>
+ <script type="text/javascript" src="js/common.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ var hashcut = new IriSP.Hashcut({url: "data/bpidata.json"});
+ });
+ </script>
+ </body>
+</html>