--- a/integration/css/edition.css Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/css/edition.css Thu Oct 25 13:31:02 2012 +0200
@@ -1,13 +1,12 @@
-/* bloc */
-.bloc-pvw{
+/* Block modes */
+
+.empty-mode .bloc-pvw,
+.empty-mode .bloc-segmentation,
+.segment-mode .bloc-pvw,
+.pvw-mode .bloc-segmentation {
display: none;
}
-.bloc-segmentation{
- display: none;
-}
-.bloc-vide{
- display: block;
-}
+
/* header - title-video-wrap */
.header .title-video-wrap{
width: 460px;
@@ -77,74 +76,59 @@
}
/* col-middle */
.col-middle{
- width: 460px; min-height: 1px;
+ width: 460px;
+ min-height: 1px;
}
.col-middle-header{
height: 35px;
- background: url(../img/bg-previsualiser.png) repeat-x 0 0;
+ font-size: 16px;
+ clear: both;
+}
+/* Tabs */
+.tab {
+ height: 35px;
line-height: 35px;
- font-size: 16px;
- font-weight: 600px;
- font-style: italic;
+ color: #30036d;
+ padding: 0 10px;
+ width: 210px;
+ float: left;
+ background-position: 0 -35px;
}
-.col-middle-header a{
- color: #30036d;
-}
-.col-middle-header a:hover{
+.tab:hover{
color: #FF00FC;
}
-.col-middle-header a.disable,
-.col-middle-header a.disable:hover{
+.tab.disable,
+.tab.disable:hover{
color: #796891;
}
-.col-middle-header a.segmenter{
- padding: 0 10px;
- display: inline-block;
- min-width: 210px;
- height: 35px;
- background: url(../img/bg-segmenter.png) repeat-x 0 0;
+.tab-segment {
+ background-image: url(../img/bg-segmenter.png);
}
-.col-middle-header a.segmenter.disable,
-.col-middle-header a.previsualiser.disable,
-.col-middle-header.disable {
- background-position: 0 -35px;
+.tab-pvw {
+ background-image: url(../img/bg-previsualiser.png); text-align: right;
}
-.col-middle-header a.previsualiser{
- background: url(../img/bg-previsualiser.png) repeat-x 0 0;
- float: right;
- padding-right: 10px;
+
+.pvw-mode .tab-pvw, .segment-mode .tab-segment {
+ width: 250px; background-position: 0 0; font-weight: 600;
}
-.col-middle .video{
- width: 460px;
- position: relative;
- margin-bottom: 8px;
+
+.segment-mode .tab-pvw, .pvw-mode .tab-segment {
+ width: 170px; color: #796891;
}
-.col-middle .video a.publier-button{
- position: absolute;
- width: 69px;
- height: 67px;
- background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
- left: 382px;
- top: 10px;
+
+.tab-media-title {
+ font-style: italic; font-weight: normal;
}
-.col-middle .video a.publier-button:hover{
- background-position: 0 -67px;
-}
-.col-middle .video a.publier-button.disable{
- background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
-}
-.col-middle .video a.publier-button.disable:hover{
- background-color: none;
-}
-.col-middle .frise{
+
+.frise{
width: 458px;
position: relative;
height: 22px;
}
-.col-middle .frise .segment{
+.frise .segment{
height: 22px;
}
-.col-middle .frise span.indication{
+.frise span.indication{
height: 22px;
line-height: 22px;
}
@@ -185,16 +169,12 @@
.bloc-segmentation{
position: relative;
}
-.bloc-segmentation .existant{
- margin-top: 190px;
-}
.bloc-segmentation .existant h2{
color: #30036d;
font-size: 14px;
font-weight: 600;
- padding-left: 8px;
- margin-bottom: 8px;
+ margin: 10px 8px 8px;
}
.bloc-segmentation .segment{
width: 100%;
@@ -203,104 +183,106 @@
margin-bottom: 5px;
position: relative;
}
-.bloc-segmentation .segment .section{
+.bloc-segmentation .section{
background-color: #ff7f0e;
height: 6px;
border:1px solid #999999;
position: absolute;
}
/* col-middle - bloc-segmentation - popin.segmentation */
-.popin.segmentation{
+.segmentation{
top: 376px;
width: 100%;
}
-.popin.segmentation img.pointer{
+.segmentation img.pointer{
left: 222px ;
}
-.popin.segmentation h2{
+.segmentation h2{
font-size: 14px;
font-weight: 600;
color:#de2500;
margin-bottom: 10px;
}
-.popin.segmentation h2 span{
+.segmentation h2 span{
color: #7628df;
}
-.popin.segmentation form{
+.segmentation form{
overflow: hidden;
}
-.popin.segmentation form .form-segment-left,
-.popin.segmentation form .form-segment-right{
+.form-segment-left,
+.form-segment-right{
float: left;
}
-.popin.segmentation form .form-segment-left{
+.segmentation .form-segment-left{
width: 228px;
}
-.popin.segmentation form p{
+.segmentation form p{
margin-bottom: 8px;
}
-.popin.segmentation label{
+.segmentation label{
display: block;
font-size: 12px;
font-weight: 600;
margin-bottom: 4px;
}
-.popin.segmentation textarea{
+.segmentation textarea{
width: 200px;
height: 66px;
max-width: 200px;
font-size: 12px;
}
-.popin.segmentation input[type=text]{
+.segmentation input[type=text]{
font-size: 12px;
width: 200px;
height: 20px;
}
-.bloc-segmentation .segment .popin.segment-section{
- top: 8px;
+
+.add-segment {
+ float: right; margin: 4px 0;
}
-.bloc-segmentation .segment .popin.segment-section h2{
+
+.segment-section{
+ top: 8px; left: 15px;
+}
+.segment-section h3{
padding: 0;
color: #de2500;
margin-bottom: 4px;
+ font-weight: 600;
}
-.bloc-segmentation .segment .popin.segment-section p{
+.segment-section p{
font-size: 12px;
}
-.bloc-segmentation .segment .popin.segment-section p span{
+.segment-section p span{
color: #7628df;
}
-.bloc-segmentation .segment .popin.segment-section a.reprendre-segment{
+.segment-section a.reprendre-segment{
float: right;
display: block;
- height: 20px;
- line-height: 20px;
}
-.bloc-segmentation .segment .popin.segment-section .instant-description{
+.segment-section .instant-description{
float: left;
margin-right: 16px;
}
/* col-middle - bloc-vide */
-.bloc-vide .tutorial{
+.tutorial{
padding: 0 10px;
color: #FFF;
font-weight: 600;
- height: 316px;
- background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333;
}
-.bloc-vide .tutorial h2{
+.tutorial h2{
padding-top: 16px;
font-size: 18px;
margin-bottom: 20px;
}
-.bloc-vide .tutorial ol{
+.tutorial ol{
padding-left: 22px;
}
-.bloc-vide .tutorial ol li:first-child{
+.tutorial ol li:first-child{
width: 324px;
}
-.bloc-vide .tutorial ol li{
+.tutorial ol li{
list-style: decimal;
font-size: 14px;
margin-bottom: 16px;
@@ -358,8 +340,8 @@
z-index: 2;
background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
}
-.col-left .list-video li a:hover,
-.col-left .list-video li a.active{
+.col-left .item-video:hover,
+.col-left .item-video.active{
background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
}
/* col-right */
@@ -380,125 +362,122 @@
margin-bottom: 12px;
padding-top: 8px;
}
-.col-right .liste-segment .frise{
+.col-right .frise{
width: 228px;
position: relative;
height: 20px;
}
-.col-right .liste-segment .frise .segment{
+.col-right .frise .segment{
height: 20px;
}
-.col-right .liste-segment .frise span.indication{
+.col-right .frise .indication{
height: 20px;
line-height: 20px;
}
-.col-right .list-video > li{
- position: relative;
-}
-.col-right .list-video > li > a:hover,
-.col-right .list-video > li > a.active{
+
+.col-right .item-video:hover,
+.col-right .item-video.active{
background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
}
-.col-right .list-video > li .tools{
- position: absolute;
- left: 94px;
- top: 48px;
-}
+
/* popin - frise-description */
-.frise-description.popin{
+.frise-description {
top: 26px;
left: 0;
width: 458px;
}
-.frise-description.popin img.pointer{
+.frise-description img.pointer{
right: 36px;
}
-.frise-description.popin h2{
+.frise-description h2{
color: #de2500;
font-size: 14px;
font-weight: bold;
}
-.frise-description.popin table{
+.frise-description table{
font-size: 12px;
}
-.frise-description.popin th{
+.frise-description th{
text-align: left;
font-weight: 600;
display: block;
min-width: 75px;
}
-.frise-description.popin td{
+.frise-description td{
line-height: 15px;
padding-left: 2px;
}
-.frise-description.popin th,
-.frise-description.popin td,
-.frise-description.popin h2{
+.frise-description th,
+.frise-description td,
+.frise-description h2{
padding-bottom: 8px;
}
-.frise-description.popin .tools{
+.frise-description .tools{
float: right;
}
/* tools */
+.tools {
+ height: 17px;
+}
.tools li{
float: left;
}
-.tools li a{
+.tools a{
display: block;
width: 17px;
height: 17px;
background: url(../img/tools-sprite.png) no-repeat 0 0;
}
-.tools li a.edit{
+.tools a.edit{
background-position: 2px 0;
}
-.tools li a.edit:hover{
+.tools a.edit:hover{
background-position: 2px -32px;
}
-.tools li a.edit.disable:hover,
-.tools li a.edit.disable{
+.tools a.edit.disable:hover,
+.tools a.edit.disable{
background-position: 2px -16px;
}
-.tools li a.bottom{
+.tools a.bottom{
background-position: -19px 0;
}
-.tools li a.bottom:hover{
+.tools a.bottom:hover{
background-position: -19px -32px;
}
-.tools li a.bottom.disable:hover,
-.tools li a.bottom.disable{
+.tools a.bottom.disable:hover,
+.tools a.bottom.disable{
background-position: -19px -16px;
}
-.tools li a.top{
+.tools a.top{
background-position: -40px 0;
}
-.tools li a.top:hover{
+.tools a.top:hover{
background-position: -40px -32px;
}
-.tools li a.top.disable:hover,
-.tools li a.top.disable{
+.tools a.top.disable:hover,
+.tools a.top.disable{
background-position: -40px -16px;
}
-.tools li a.delete{
+.tools a.delete{
background-position: -61px 0;
}
-.tools li a.delete:hover{
+.tools a.delete:hover{
background-position: -61px -32px;
}
-.tools li a.delete.disable:hover,
-.tools li a.delete.disable{
+.tools a.delete.disable:hover,
+.tools a.delete.disable{
background-position: -61px -16px;
}
/* list-video */
-.list-video{
+.list-video {
overflow: hidden;
overflow-y: auto;
- max-height: 680px;
+ height: 680px;
}
-.list-video > li{
+.item-video {
margin-bottom: 1px;
}
-.list-video > li > a{
+.item-video{
padding: 5px 10px 5px 10px;
position: relative;
clear: both;
@@ -506,37 +485,37 @@
min-height: 62px;
display: block;
}
-.list-video li a img{
+.item-video img{
float: left;
}
-.list-video li a img{
+.item-video img{
margin-right: 4px;
}
-.list-video li a span.video-info{
+.item-video .video-info{
display: block;
margin-left: 88px;
}
-.list-video li a .video-info .title-video{
+.item-video .title-video{
font-size: 13px;
font-weight: 600;
color: #30036d;
display: block;
margin-bottom: 1px;
}
-.list-video li a span.video-info .author{
+.item-video .author{
font-size: 11px;
display: block;
margin-bottom: 1px;
}
-ul.list-video li a span.video-info span.time-length{
+.item-video .time-length{
font-size: 12px;
font-weight: 600;
display: block;
}
-ul.list-video li a span.video-info span.time-length span{
+.item-video .time-length span{
color: #de2500;
}
-.list-video li a .number{
+.item-video .number{
color: #FFF;
font-size: 10px;
text-align: center;
@@ -552,17 +531,42 @@
top: 54px;
left: 78px;
}
-.list-video li a .subtitle{
+.item-video .subtitle{
margin-bottom: 2px;
display: block;
color: #de2500;
font-size: 11px;
}
-.list-video li .duration{
+.item-video .duration{
color: #7628df;
font-size: 12px;
font-weight: 600;
display: block;
}
+/* Video */
+.video{
+ width: 460px;
+ height: 345px;
+ position: relative;
+ margin-bottom: 8px;
+ background: #333333;
+}
+a.publier-button{
+ position: absolute;
+ width: 69px;
+ height: 67px;
+ background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
+ left: 382px;
+ top: 10px;
+}
+a.publier-button:hover{
+ background-position: 0 -67px;
+}
+a.publier-button.disable{
+ background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
+}
+a.publier-button.disable:hover{
+ background-color: none;
+}