--- a/integration/css/common.css Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/css/common.css Fri Nov 16 19:23:20 2012 +0100
@@ -96,19 +96,24 @@
}
/* header - title-video-wrap */
.title-video-wrap{
- width: 460px;
+ width: 380px;
}
-.title-video-wrap a{
- position: absolute;
- top: 10px;
+.title-video-wrap .title-video {
+ margin-top: 10px;
left: 0;
font-size: 18px;
font-weight: bold;
color: #30036d;
text-decoration: underline;
+}
+.title-video-wrap .title-video:hover {
+ text-decoration: none;
+}
+.title-video-wrap .open-popin {
+ color: #30036d;
background-image: url(../img/pencil-icon.png);
background-repeat: no-repeat;
- background-position: right 2px;
+ background-position: right 6px;
padding-right: 20px;
min-height: 20px;
}
@@ -149,6 +154,7 @@
}
/* header - profil-wrap */
.header .profil-wrap{
+ float: right;
width: 250px;
}
.header .profil-wrap a{
@@ -419,12 +425,12 @@
}
.item-video {
margin-bottom: 1px;
- cursor: pointer;
padding: 5px 10px 5px 10px;
clear: both;
width: auto;
min-height: 62px;
display: block;
+ position: relative;
}
.item-video img{
float: left;
@@ -434,48 +440,47 @@
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{
+.item-video .description{
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{
+.item-video .media-count-wrap {
+ width: 30px;
+ text-align: center;
+ position: absolute;
+ top: 45px;
+ left: 75px;
+ height: 15px;
+ display: none;
+}
+.item-video .media-count{
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;
+ padding: 0 3px;
+ border: 1px solid #DE2500;
}
.item-video .subtitle{
margin-bottom: 2px;
- display: block;
color: #de2500;
font-size: 11px;
}
@@ -483,7 +488,6 @@
color: #7628df;
font-size: 12px;
font-weight: 600;
- display: block;
}
/* frise */
.frise{
@@ -492,6 +496,10 @@
border: 1px solid #333333;
}
+.mashup-frise {
+ cursor: pointer;
+}
+
.frise-overflow {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
@@ -509,30 +517,31 @@
background: #CCCCCC;
}
.frise-segment{
- cursor: pointer;
- height: 22px;
position: absolute;
+ height: 100%;
+}
+.mashup-frise .frise-segment {
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;
+ box-shadow: inset 0px 1px 1px 0px #666;
}
-.frise-segment:first-child{
+.mashup-frise .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{
+.mashup-frise .frise-segment:last-child{
background-image: none;
}
-.frise-segment.active {
+.frise-segment.active, .mashup-frise .frise-segment.active {
background-image: url(../img/pinstripe-purple.png);
background-repeat: repeat;
}
.frise-indication{
- height: 22px;
+ height: 100%;
line-height: 22px;
display: inline-block;
position: absolute;
@@ -544,6 +553,7 @@
text-align: center;
background: url(../img/bg-indication.png) 15px 0 no-repeat;
margin-left: -15px;
+ text-shadow: 1px 1px 1px #000000;
}
.frise-position {
width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
@@ -617,6 +627,22 @@
position: relative;
}
+.segment-tooltip-wrapper {
+ position: absolute; height: 0; width: 0;
+ top: 0; z-index: 7; display: none; left: 50%;
+}
+
+.segment-tooltip {
+ padding: 4px; border: 1px solid #867a97; background: url(../img/bg-jaune.png);
+ width: 130px; position: absolute; bottom: 14px; left: -70px;
+ font-size: 12px; font-weight: 600; text-align: center; color: #DE2500;
+}
+
+.segment-tooltip-tip {
+ position: absolute; top: -15px; left: -10px; background: url(../img/inv-triangle.png);
+ width: 20px; height: 13px;
+}
+
/* Styles from Metadataplayer */
/* Slider Widget */
@@ -824,4 +850,89 @@
.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
background: #F7268E;
-}
\ No newline at end of file
+}
+
+/* Social Share Widget */
+
+.Ldt-Social {
+ float: right; margin-top: 10px;
+}
+
+.Ldt-Social a {
+ float: left; width: 24px; height: 24px; background: url(../img/socialbuttons.png);
+}
+
+.Ldt-Social-Url-Container {
+ float: left; width: 24px; height: 24px; position: relative;
+}
+
+a.Ldt-Social-Url {
+ margin: 0; background-position: -96px 0;
+}
+
+a.Ldt-Social-Url:hover {
+ background-position: -96px -24px;
+}
+
+.Ldt-Social-UrlPop {
+ position: absolute; left: 20px; top: -2px; background: url(../img/socialcopy.png);
+ padding: 3px 0 0 12px; width: 218px; height: 27px;
+ display: none;
+}
+
+.Ldt-Social-Input, .Ldt-Social-CopyBtn {
+ font-size: 11px; margin: 1px; border: 1px solid #ccc; height: 16px;
+ padding: 1px; border-radius: 2px; display: inline-block;
+}
+
+.Ldt-Social-Input:hover, .Ldt-Social-CopyBtn.hover {
+ border-color: #8080ff;
+}
+
+.Ldt-Social-Input {
+ width: 150px;
+}
+
+.Ldt-Social-CopyBtn {
+ font-weight: bold; width: 50px; text-align: center; background: #f0f0ff; line-height: 16px; width: 46px;
+}
+
+.Ldt-Social-CopyBtn.hover {
+ background: #ffe0a0;
+}
+
+.Ldt-Social-CopyBtn.active {
+ background: #ff8000;
+}
+
+a.Ldt-Social-Twitter {
+ background-position: 0 0;
+}
+
+a.Ldt-Social-Twitter:hover {
+ background-position: 0 -24px;
+}
+
+a.Ldt-Social-Fb {
+ background-position: -24px 0;
+}
+
+a.Ldt-Social-Fb:hover {
+ background-position: -24px -24px;
+}
+
+a.Ldt-Social-Gplus {
+ background-position: -48px 0;
+}
+
+a.Ldt-Social-Gplus:hover {
+ background-position: -48px -24px;
+}
+
+a.Ldt-Social-Mail {
+ background-position: -72px 0;
+}
+
+a.Ldt-Social-Mail:hover {
+ background-position: -72px -24px;
+}