--- a/player/css/styles.css Wed May 29 17:05:34 2013 +0200
+++ b/player/css/styles.css Thu May 30 18:47:48 2013 +0200
@@ -56,6 +56,12 @@
url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
}
+@font-face {
+ font-family: 'Futura-CondensedExtraBold';
+ src: url('../fonts/Futura-CondensedExtraBold.woff') format('woff'),
+ url('../fonts/Futura-CondensedExtraBold.ttf') format('truetype'),
+ url('../fonts/Futura-CondensedExtraBold.svg#Futura-CondensedExtraBold') format('svg');
+}
/* End of the reset part */
body {
@@ -146,8 +152,8 @@
.pictolist li {
line-height: 38px; opacity: 0; display: none; height: 0;
padding: 6px; width: 38px; overflow: hidden;
- -webkit-transition: width 0.5s;
- transition: width 0.5s;
+ -webkit-transition: width 0.8s;
+ transition: width 0.8s;
}
.pictolist li.hover {
@@ -157,19 +163,18 @@
.picto {
float: left; padding: 7px; background:black;
border-radius: 19px; cursor: pointer;
- -webkit-transition: box-shadow 0.5s, background 0.5s;
- transition: box-shadow 0.5s, background 0.5s;
-}
-
-.found .picto {
- box-shadow: 0 0 8px #ffffff;
- border: 1px solid #cccccc; padding: 6px;
+ -webkit-transition: background 0.8s;
+ transition: background 0.8s;
}
.picto-title {
margin-left: 8px; font-size: 12px; text-transform: uppercase;
- padding: 4px 6px; background: rgba(0, 0, 0, .5); text-shadow: 1px 1px 1px #000000;
- font-family: 'Futura-Medium';
+ padding: 4px 6px; background: rgba(0, 0, 0, .7);
+ font-family: 'Futura-CondensedExtraBold';
+}
+
+.found .picto-title {
+ background: rgba(255, 255, 255, .7);
}
.picto a {
@@ -256,6 +261,12 @@
background-position: -24px -120px;
}
+.found .picto,
+.current.found picto,
+.hover.found .picto {
+ background: #ffffff;
+}
+
/* Annotations */
.annotation-templates {
@@ -271,8 +282,7 @@
}
.close-annotation {
- float: right; text-decoration: none; margin: 0 5px;
- font-weight: bold; font-size: 20px;
+ float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);
}
.annotation {
@@ -299,8 +309,12 @@
color: #000000;
}
+.white-annotation .close-annotation {
+ background-position: -24px -160px;
+}
+
.white-annotation .close-annotation:hover {
- color: #666666;
+ background-position: -36px -160px;
}
.white-annotation .annotation-title {
@@ -310,7 +324,7 @@
/* Black annotations */
.black-annotation .annotation-main {
- position: relative; background: rgba(0,0,0,.7);
+ background: rgba(0,0,0,.7);
}
.black-annotation .annotation-title {
@@ -318,11 +332,11 @@
}
.black-annotation .close-annotation {
- color: #ffffff; margin-right: 10px;
+ background-position: -24px -170px;
}
.black-annotation .close-annotation:hover {
- color: #cccccc;
+ background-position: -36px -170px;
}
.black-annotation p {
@@ -391,11 +405,11 @@
.link-contents {
font-family: Georgia, 'Times New Roman', serif;
- margin: 0 80px 35px;
+ margin: 40px 80px 80px;
}
.link-contents p {
- text-align: center; font-size: 23px; margin: 30px 0;
+ text-align: center; font-size: 23px; margin: 25px 0;
}
.link-contents a {
@@ -405,7 +419,7 @@
/* Audio annotation */
.audio-annotation .media-description {
- margin: 25px 0 0; font-size: 15px;
+ margin: 25px 0 0; font-size: 15px; font-weight: bold;
}
.audio-annotation .annotation-main {
@@ -437,7 +451,7 @@
/* Slideshow annotation */
.slideshow-frame {
- float: left;
+ float: left; width: 650px; height: 452px; position: relative; background: #000000;
}
.slideshow-image {
max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
@@ -446,8 +460,8 @@
.slideshow-play-pause {
float: left; padding: 10px 15px 11px;
background: #404040; cursor: pointer;
- -webkit-transition: background 0.5s;
- transition: background 0.5s;
+ -webkit-transition: background 0.8s;
+ transition: background 0.8s;
}
.slideshow-play-pause a {
@@ -468,7 +482,7 @@
}
.slideshow-description {
- max-height: 452px; overflow: auto;
+ height: 452px; overflow: auto;
}
.slideshow-title {
@@ -477,8 +491,8 @@
.slideshow-arrow {
position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
- -webkit-transition: background 0.5s;
- transition: background 0.5s;
+ -webkit-transition: background 0.8s;
+ transition: background 0.8s;
}
.slideshow-arrow a {
@@ -516,8 +530,8 @@
padding: 8px; border-radius: 15px;
background: #555555; cursor: pointer;
margin: 8px 0 0 15px;
- -webkit-transition: background 0.5s;
- transition: background 0.5s;
+ -webkit-transition: background 0.8s;
+ transition: background 0.8s;
}
.play-button:hover {
@@ -535,7 +549,7 @@
.chapters-bar {
margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
- transition: opacity 0.5s;
+ transition: opacity 0.8s;
}
.chapter {
@@ -547,8 +561,8 @@
margin: 0 -1px;
border-style: none solid; border-width: 1px;
border-color: #000000;
- -webkit-transition: box-shadow 0.5s, background 0.5s;
- transition: box-shadow 0.5s, background 0.5s;
+ -webkit-transition: background 0.8s, opacity 0.8s;
+ transition: background 0.8s, opacity 0.8s;
}
.chapter.active .chapter-block {
@@ -556,7 +570,7 @@
}
.chapter.found .chapter-block {
- box-shadow: 0 0 20px rgba(255, 255, 255, .6) inset;
+ background: #ffffff;
}
.annotation-onscreen .chapter-block {
@@ -568,8 +582,8 @@
font-size: 9px; text-transform: uppercase;
text-align: center; color: #909090; opacity: 0;
font-family: 'Futura-Medium';
- -webkit-transition: background 0.5s;
- transition: opacity 0.5s;
+ -webkit-transition: background 0.8s;
+ transition: opacity 0.8s;
}
.chapter.active .chapter-title {
@@ -582,12 +596,12 @@
.chip-circle {
width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
- -webkit-transition: box-shadow 0.5s, opacity 0.5s;
- transition: box-shadow 0.5s, opacity 0.5s;
+ -webkit-transition: background 0.8s, opacity 0.8s;
+ transition: background 0.8s, opacity 0.8s;
}
.chip-pole {
- position: absolute; top: 2px; left: 0; width: 0; height: 13px; border-left: 1px solid; display: none;
+ position: absolute; top: 0; left: 0; width: 0; height: 17px; border-left: 1px solid; display: none;
}
.chip.hover .chip-pole {
@@ -595,10 +609,10 @@
}
.chip-title {
- position: absolute; top: 2px; left: 3px; font-size: 9px; line-height: 9px; height: 9px; text-transform: uppercase;
- display: block; font-family: 'Futura-Medium'; width: 0; overflow: hidden;
- -webkit-transition: width 0.5s;
- transition: width 0.5s;
+ position: absolute; top: 1px; left: 3px; font-size: 9px; line-height: 13px; height: 13px;
+ display: block; width: 0; overflow: hidden;
+ -webkit-transition: width 0.8s;
+ transition: width 0.8s;
}
.chip.hover .chip-title {
@@ -618,33 +632,33 @@
opacity: 1;
}
-.found .chip-circle {
- box-shadow: 0 0 8px #ffffff;
- border: 1px solid #cccccc; width: 9px; height: 9px;
-}
-
.video .chip-circle {
- background: #be4477;
+ background: #be4477; color: #be4477;
}
.audio .chip-circle {
- background: #63be6c;
+ background: #63be6c; color: #63be6c;
}
.slideshow .chip-circle {
- background: #f69058;
+ background: #f69058; color: #f69058;
}
.text .chip-circle {
- background: #5e90cb;
+ background: #5e90cb; color: #5e90cb;
}
.quote .chip-circle {
- background: #00aeb5;
+ background: #00aeb5; color: #00aeb5;
}
.link .chip-circle {
- background: #8985bb;
+ background: #8985bb; color: #8985bb;
+}
+
+.found .chip-circle {
+ background: #ffffff;
+ border: 2px solid; left: -6px; top: 16px; width: 9px; height: 9px;
}
.left-hiding-block, .right-hiding-block {