integration/css/edition.css
changeset 29 5ce5e26091ea
parent 27 b2d068afdbd8
child 31 165284801055
child 32 47f9a2d63a0a
equal deleted inserted replaced
28:2100ddc308f0 29:5ce5e26091ea
   122     display: none;
   122     display: none;
   123 }
   123 }
   124 
   124 
   125 /* frise */
   125 /* frise */
   126 .frise{
   126 .frise{
   127 	width: 458px;
       
   128 	height: 22px;
   127 	height: 22px;
   129 	overflow: hidden;
   128 	overflow: hidden;
   130 	position: relative;
   129 	position: relative;
   131 	border: 1px solid #333333;
   130 	border: 1px solid #333333;
   132 }
   131 }
   138 	left: 0;
   137 	left: 0;
   139 }
   138 }
   140 .frise-indications{
   139 .frise-indications{
   141 	z-index: 2;
   140 	z-index: 2;
   142 }
   141 }
       
   142 .bloc-pvw .frise {
       
   143    margin: 7px 5px 2px;
       
   144 }
       
   145 
   143 .aucun-segment{
   146 .aucun-segment{
   144 	font-weight: 600;
   147 	font-weight: 600;
   145 	font-style: italic;
   148 	font-style: italic;
   146 	text-align: center;
   149 	text-align: center;
   147 	line-height: 20px;
   150 	line-height: 20px;
   153 	height: 22px;
   156 	height: 22px;
   154 	position: absolute;
   157 	position: absolute;
   155 	background-image: url(../img/border-right-segment.png);
   158 	background-image: url(../img/border-right-segment.png);
   156 	background-repeat: repeat-y;
   159 	background-repeat: repeat-y;
   157 	background-position: right top;
   160 	background-position: right top;
   158 	-moz-box-shadow: inset 0px 2px 2px 0px #333;
   161 	-moz-box-shadow: inset 0px 1px 1px 0px #666;
   159   	-webkit-box-shadow: inset 0px 2px 2px 0px #333;
   162   	-webkit-box-shadow: inset 0px 1px 1px 0px #666;
   160   	box-shadow: inset 0px 2px 2px 0px #333;
   163   	box-shadow: inset 0px 1px 1px 0px #666;
   161 }
   164 }
   162 .frise-segment:first-child{
   165 .frise-segment:first-child{
   163 	-moz-box-shadow: inset 2px 2px 2px 0px #333;
   166 	-moz-box-shadow: inset 1px 1px 1px 0px #666;
   164   	-webkit-box-shadow: inset 2px 2px 2px 0px #333;
   167   	-webkit-box-shadow: inset 1px 1px 1px 0px #666;
   165   	box-shadow: inset 2px 2px 2px 0px #333;
   168   	box-shadow: inset 1px 1px 1px 0px #666;
   166 }
   169 }
   167 .frise-segment:last-child{
   170 .frise-segment:last-child{
   168 	background-image: none;
   171 	background-image: none;
   169 }
   172 }
   170 .frise-indication{
   173 .frise-indication{
   187 /* col-middle - bloc-segmentation */
   190 /* col-middle - bloc-segmentation */
   188 .bloc-segmentation{
   191 .bloc-segmentation{
   189 	position: relative;
   192 	position: relative;
   190 }
   193 }
   191 
   194 
   192 .bloc-segmentation .existant h2{
   195 /* col-middle - bloc-segmentation - popin.segmentation */
   193 	color: #30036d;
   196 
   194 	font-size: 14px;
   197 .pointer-padder {
   195 	font-weight: 600;
   198     left: 5px;
   196     margin: 10px 8px 8px;
   199     position: absolute;
   197 }
   200     right: 5px;
   198 .bloc-segmentation .segment{
   201     top: 0;
   199 	width: 100%;
   202 }
   200 	height: 8px;
   203 
   201 	background-color: #b6b8b8;
   204 .pointer-padder .pointer {
   202 	margin-bottom: 5px;
   205     top: 0; margin-left: -10px;
   203 	position: relative;
       
   204 }
       
   205 .bloc-segmentation .section{
       
   206 	background-color: #ff7f0e;
       
   207 	height: 6px;
       
   208 	border:1px solid #999999;
       
   209 	position: absolute;
       
   210 }
   206 }
   211 
   207 
   212 .segment-info {
   208 .segment-info {
   213     padding-top: 12px;
   209     padding-top: 12px;
   214     position: relative;
   210     position: relative;
   215     width: 100%;
   211     width: 100%;
   216     overflow: hidden;
   212     overflow: hidden;
   217 }
   213 }
   218 
   214 
   219 /* col-middle - bloc-segmentation - popin.segmentation */
       
   220 .segment-info .pointer{
       
   221     top: 0; margin-left: -10px;
       
   222 }
       
   223 
       
   224 .segmentation .pointer{
       
   225 	left: 230px;
       
   226 }
       
   227 .segmentation h2{
   215 .segmentation h2{
   228 	font-size: 14px;
   216 	font-size: 14px;
   229 	font-weight: 600;
   217 	font-weight: 600;
   230 	color:#de2500;
   218 	color:#de2500;
   231 	margin-bottom: 10px;
   219 	margin-bottom: 10px;
   285 }
   273 }
   286 
   274 
   287 .add-segment {
   275 .add-segment {
   288     float: right; margin: 4px 0;
   276     float: right; margin: 4px 0;
   289 }
   277 }
   290 
   278 .media-segments h2{
   291 .segment-section{
   279     color: #30036d;
   292 	top: 8px; left: 15px;
   280     font-size: 14px;
   293 }
   281     font-weight: 600;
   294 .segment-section h3{
   282     margin: 10px 8px 2px;
       
   283 }
       
   284 
       
   285 .media-segment {
       
   286     height: 8px;
       
   287     margin: 8px 6px 0;
       
   288     background-color: #b6b8b8;
       
   289     position: relative;
       
   290 }
       
   291 .media-section {
       
   292     position: absolute;
       
   293 }
       
   294 .media-segment-section {
       
   295     top: 0; height: 8px;
       
   296 }
       
   297 
       
   298 .media-current-section {
       
   299     background: url(../img/pinstripe-purple.png);
       
   300     top: -2px; height: 2px;
       
   301 }
       
   302 
       
   303 .media-current-section-inner {
       
   304     background: url(../img/pinstripe-purple.png);
       
   305     margin-top: 10px; height: 2px;
       
   306 }
       
   307 .media-segment .pointer{
       
   308     margin-left: 140px
       
   309 }
       
   310 .media-segment-popin {
       
   311     padding-top: 12px; overflow: hidden;
       
   312     top: 2px; width: 300px; margin-left: -151px;
       
   313     display: none;
       
   314 }
       
   315 .media-segment-popin h3{
   295 	padding: 0;
   316 	padding: 0;
   296 	color: #de2500;
   317 	color: #de2500;
   297 	margin-bottom: 4px;
   318 	margin-bottom: 4px;
   298 	font-weight: 600;
   319 	font-weight: 600;
   299 }
   320 }
   300 .segment-section p{
   321 .media-segment-popin p{
       
   322     margin-right: 155px;
   301 	font-size: 12px;
   323 	font-size: 12px;
   302 }
   324 }
   303 .segment-section p span{
   325 .media-segment-popin span{
   304 	color: #7628df;
   326 	color: #7628df;
   305 }
   327 }
   306 
   328 .reprendre-segment{
   307 .segment-section a.reprendre-segment{
       
   308 	float: right;
   329 	float: right;
   309 	display: block;
   330 	display: block;
   310 }
       
   311 .segment-section .instant-description{
       
   312 	float: left;
       
   313 	margin-right: 16px;
       
   314 }
   331 }
   315 /* col-middle - bloc-vide */
   332 /* col-middle - bloc-vide */
   316 .tutorial{
   333 .tutorial{
   317 	padding: 0 10px;
   334 	padding: 0 10px;
   318 	color: #FFF;
   335 	color: #FFF;
   427 	background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
   444 	background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
   428 }
   445 }
   429 
   446 
   430 /* popin - frise-description */
   447 /* popin - frise-description */
   431 
   448 
   432 .mashup-description img.pointer{
       
   433 	right: 36px;
       
   434 }
       
   435 .annotation-title {
   449 .annotation-title {
   436 	color: #de2500;
   450 	color: #de2500;
   437 	font-size: 14px;
   451 	font-size: 14px;
   438 	font-weight: bold;
   452 	font-weight: bold;
   439 }
   453 }
   615 a.publier-button.disable:hover{
   629 a.publier-button.disable:hover{
   616     background-color: none;
   630     background-color: none;
   617 }
   631 }
   618 
   632 
   619 .widget {
   633 .widget {
   620     position: relative;
   634     position: relative; 
   621 }
   635 }
   622 
   636 
   623 /* Styles from Metadataplayer */
   637 /* Styles from Metadataplayer */
   624 
   638 
   625 /* Slider Widget */
   639 /* Slider Widget */
   626 
   640 
       
   641 .Ldt-Slider-Container {
       
   642     background: #969696;
       
   643     background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
       
   644     background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
       
   645     border-top: 1px solid #969696;
       
   646     height: 4px;
       
   647 }
       
   648 
   627 .Ldt-Slider {
   649 .Ldt-Slider {
   628     border: none; border-radius: 0; padding: 0; margin: 0; background: #B6B8B8;
   650     border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8;
   629 }
   651 }
   630 
   652 
   631 .Ldt-Slider .ui-slider-handle {
   653 .Ldt-Slider .ui-slider-handle {
   632     border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
   654     border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
   633 }
   655 }
   646 
   668 
   647 .Ldt-Ctrl {
   669 .Ldt-Ctrl {
   648   font-size: 10px;
   670   font-size: 10px;
   649   background:url('../img/player_gradient.png') repeat-x transparent ;
   671   background:url('../img/player_gradient.png') repeat-x transparent ;
   650   height: 25px;
   672   height: 25px;
   651   border: 1px solid #b6b8b8;
   673   border: 1px solid #969696;
   652   position: relative;
   674   position: relative;
   653 }
   675 }
   654 
   676 
   655 .Ldt-Ctrl-Left {
   677 .Ldt-Ctrl-Left {
   656   float:left; width: 300px;
   678   float:left; width: 300px;
   666   background: url('../img/player-sprites.png');
   688   background: url('../img/player-sprites.png');
   667   cursor: pointer;
   689   cursor: pointer;
   668 }
   690 }
   669 
   691 
   670 .Ldt-Ctrl-spacer {
   692 .Ldt-Ctrl-spacer {
   671     float: left; width: 1px; height: 25px; background: #b6b8b8;
   693     float: left; width: 1px; height: 25px; background: #969696;
   672 }
   694 }
   673 
   695 
   674 .Ldt-Ctrl-Play {
   696 .Ldt-Ctrl-Play {
   675   margin: 0 15px;
   697   margin: 0 15px;
   676 }
   698 }
   821 }
   843 }
   822 
   844 
   823 /* Slice Widget */
   845 /* Slice Widget */
   824 
   846 
   825 .Ldt-Slice {
   847 .Ldt-Slice {
   826     border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
   848     border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px;
   827 }
   849 }
   828 
   850 
   829 .Ldt-Slice .ui-slider-handle {
   851 .Ldt-Slice .ui-slider-handle {
   830     width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0;
   852     width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0;
   831     background: url(../img/slice-handles.png); border-radius: 0; cursor: pointer;
   853     background: url(../img/slice-handles.png); border-radius: 0; cursor: pointer;
   833 
   855 
   834 .ui-slider-handle.Ldt-Slice-left-handle {
   856 .ui-slider-handle.Ldt-Slice-left-handle {
   835     margin-left: -7px;
   857     margin-left: -7px;
   836 }
   858 }
   837 
   859 
       
   860 .ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active {
       
   861     background-position: 0 -20px;
       
   862 }
       
   863 
   838 .ui-slider-handle.Ldt-Slice-right-handle {
   864 .ui-slider-handle.Ldt-Slice-right-handle {
   839     margin-left: 0; background-position: -7px 0;
   865     margin-left: 0; background-position: -7px 0;
   840 }
   866 }
   841 
   867 
       
   868 .ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active {
       
   869     background-position: -7px -20px;
       
   870 }
       
   871 
   842 .Ldt-Slice .ui-slider-range {
   872 .Ldt-Slice .ui-slider-range {
   843     background: url(../img/pinstripe-purple.png);
   873     background: url(../img/pinstripe-purple.png);
   844 }
   874 }