diff -r 1cb099921ca8 -r 165284801055 integration/css/common.css --- 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); +}