--- a/player/css/styles.css Tue May 28 12:26:49 2013 +0200
+++ b/player/css/styles.css Wed May 29 17:05:34 2013 +0200
@@ -84,7 +84,7 @@
}
.tags-title {
- line-height: 40px; padding: 0 15px; font-size: 11px; color: #cc40c0;
+ line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
font-family: 'Futura-Medium'; text-transform: uppercase;
}
@@ -97,20 +97,16 @@
padding: 10px 0; display: none;
}
-.tags:hover .tags-list {
- display: block;
-}
-
.tag {
color: #cccccc; padding: 5px 15px;
}
.tag:hover {
- color: #cc40c0; background: #202020;
+ color: #ffffff; background: #202020;
}
.tag.found {
- color: #cc40c0;
+ color: #ffffff;
}
/* Annotation colors */
@@ -144,30 +140,36 @@
.pictolist {
position: absolute;
- left: 20px; bottom: 115px;
+ left: 14px; bottom: 24px;
}
.pictolist li {
- height: 34px; margin-top: 12px; line-height: 34px; display: none;
+ line-height: 38px; opacity: 0; display: none; height: 0;
+ padding: 6px; width: 38px; overflow: hidden;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
+}
+
+.pictolist li.hover {
+ width: 400px;
}
.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 #ff00f0;
- border: 2px solid #800078; padding: 5px;
+ box-shadow: 0 0 8px #ffffff;
+ border: 1px solid #cccccc; padding: 6px;
}
.picto-title {
- margin-left: 10px; font-size: 12px; text-transform: uppercase;
- display: none; text-shadow: 0.3px 0.7px 0 rgba(0,0,0,.5), -0.3px -0.7px 0 rgba(200,200,200,.5); font-family: 'Futura-Medium';
-}
-
-.hover .picto-title {
- display: inline;
+ 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';
}
.picto a {
@@ -274,35 +276,62 @@
}
.annotation {
- left: 45px; top: 20px; right: 35px;
+ left: 45px; top: 800px; right: 35px;
+}
+
+.annotation-main:after {
+ content: "."; visibility: hidden; display: block; height: 1px; clear: both;
}
-/* Text annotation */
+/* Narrow annotations */
-.text-annotation,
-.link-annotation,
-.audio-annotation {
+.narrow-annotation {
+ left: 210px; right: 200px;
+}
+
+/* White annotations */
+
+.white-annotation {
background: #ffffff; max-height: 522px; overflow: auto;
}
-.text-annotation .close-annotation,
-.audio-annotation .close-annotation,
-.link-annotation .close-annotation {
+.white-annotation {
color: #000000;
}
-.text-annotation .close-annotation:hover,
-.audio-annotation .close-annotation:hover,
-.link-annotation .close-annotation:hover {
+.white-annotation .close-annotation:hover {
color: #666666;
}
-.text-annotation .annotation-title,
-.audio-annotation .annotation-title,
-.link-annotation .annotation-title {
+.white-annotation .annotation-title {
font-size: 23px; margin: 24px 0;
}
+/* Black annotations */
+
+.black-annotation .annotation-main {
+ position: relative; background: rgba(0,0,0,.7);
+}
+
+.black-annotation .annotation-title {
+ height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
+}
+
+.black-annotation .close-annotation {
+ color: #ffffff; margin-right: 10px;
+}
+
+.black-annotation .close-annotation:hover {
+ color: #cccccc;
+}
+
+.black-annotation p {
+ margin: 10px 25px 10px 15px;
+ font-size: 12px; color: #CCCCCC;
+}
+
+/* Text annotation */
+
.text-contents {
font-family: Georgia, 'Times New Roman', serif;
margin: 0 45px 35px;
@@ -376,33 +405,22 @@
/* Audio annotation */
.audio-annotation .media-description {
- font-family: Georgia, 'Times New Roman', serif;
- margin: 35px 45px; font-size: 15px;
+ margin: 25px 0 0; font-size: 15px;
+}
+
+.audio-annotation .annotation-main {
+ padding: 25px 0 15px;
}
.audio-annotation .media-frame {
- margin: 0 45px;
+ margin: 0 15px;
}
.audio-annotation p {
- margin-bottom: 10px;
+ margin: 10px 15px;
}
-/* Slideshow annotation */
-
-.slideshow-center,
-.video-center {
- position: relative; background: rgba(0,0,0,.7);
-}
-
-.slideshow-annotation .annotation-title,
-.video-annotation .annotation-title {
- height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
-}
-
-.slideshow-frame {
- float: left;
-}
+/* Video annotation */
.video-annotation .media-frame {
float: left; width: 650px; max-height: 487px;
@@ -412,6 +430,15 @@
width: 650px; max-height: 487px;
}
+.video-annotation .media-description {
+ max-height: 487px; overflow: auto;
+}
+
+/* Slideshow annotation */
+
+.slideshow-frame {
+ float: left;
+}
.slideshow-image {
max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
}
@@ -419,6 +446,8 @@
.slideshow-play-pause {
float: left; padding: 10px 15px 11px;
background: #404040; cursor: pointer;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-play-pause a {
@@ -438,41 +467,18 @@
clear: both; height: 35px; background: #000000;
}
-.slideshow-annotation .close-annotation,
-.video-annotation .close-annotation {
- color: #ffffff; margin-right: 10px;
-}
-
-.slideshow-annotation .close-annotation:hover,
-.video-annotation .close-annotation:hover {
- color: #cccccc;
-}
-
-.slideshow-annotation p,
-.video-annotation p {
- margin: 10px 25px 10px 15px;
- font-size: 12px; color: #CCCCCC;
-}
-
.slideshow-description {
max-height: 452px; overflow: auto;
}
-.video-annotation .media-description {
- max-height: 487px; overflow: auto;
-}
-
-.slideshow-center:after,
-.video-center:after {
- content: "."; visibility: hidden; display: block; height: 1px; clear: both;
-}
-
.slideshow-title {
line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
}
.slideshow-arrow {
position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-arrow a {
@@ -510,6 +516,8 @@
padding: 8px; border-radius: 15px;
background: #555555; cursor: pointer;
margin: 8px 0 0 15px;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.play-button:hover {
@@ -527,6 +535,7 @@
.chapters-bar {
margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
+ transition: opacity 0.5s;
}
.chapter {
@@ -538,6 +547,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;
}
.chapter.active .chapter-block {
@@ -545,7 +556,7 @@
}
.chapter.found .chapter-block {
- box-shadow: 0 0 20px rgba(255, 0, 240, .6) inset;
+ box-shadow: 0 0 20px rgba(255, 255, 255, .6) inset;
}
.annotation-onscreen .chapter-block {
@@ -553,14 +564,16 @@
}
.chapter-title {
- position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px;
+ position: absolute; top: 53px; left: 50%; width: 300px; margin-left: -150px;
font-size: 9px; text-transform: uppercase;
- text-align: center; color: #909090; display: none;
+ text-align: center; color: #909090; opacity: 0;
font-family: 'Futura-Medium';
+ -webkit-transition: background 0.5s;
+ transition: opacity 0.5s;
}
.chapter.active .chapter-title {
- display: block;
+ opacity: 1;
}
.chip {
@@ -569,19 +582,31 @@
.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;
+}
+
+.chip-pole {
+ position: absolute; top: 2px; left: 0; width: 0; height: 13px; border-left: 1px solid; display: none;
+}
+
+.chip.hover .chip-pole {
+ display: block;
}
.chip-title {
- position: absolute; top: 2px; left: 0; font-size: 9px; text-transform: uppercase;
- display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
-}
-
-.left .chip-title {
- border-left: none; border-right: 1px solid; left: auto; right: 0; text-align: right;
+ 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;
}
.chip.hover .chip-title {
- display: block;
+ width: 200px;
+}
+
+.chip.left .chip-title {
+ left: auto; right: 3px; text-align: right;
}
.annotation-onscreen .chip {
@@ -594,8 +619,8 @@
}
.found .chip-circle {
- box-shadow: 0 0 8px #ff00f0;
- border: 2px solid #800078; width: 9px; height: 9px;
+ box-shadow: 0 0 8px #ffffff;
+ border: 1px solid #cccccc; width: 9px; height: 9px;
}
.video .chip-circle {
@@ -634,13 +659,18 @@
right: -6px;
}
+.chapter-nav {
+ position: relative;
+}
+
.prev-chapter, .next-chapter {
+ position: absolute; z-index: 4;
width: 12px; height: 16px; margin: 8px 5px;
background: url(../img/sprites.png); cursor: pointer;
}
.next-chapter {
- float: right; background-position: -12px -144px;
+ right: 0; background-position: -12px -144px;
}
.next-chapter:hover {
@@ -652,7 +682,7 @@
}
.prev-chapter {
- float: left; background-position: 0 -144px;
+ left: 0; background-position: 0 -144px;
}
.prev-chapter:hover {