--- 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);
+}