--- a/player/css/styles.css Fri May 17 14:17:30 2013 +0200
+++ b/player/css/styles.css Tue May 21 19:12:29 2013 +0200
@@ -47,6 +47,15 @@
overflow: hidden;
}
+/* Fonts */
+
+@font-face {
+ font-family: 'Futura-Medium';
+ src: url('../fonts/Futura-Medium.woff') format('woff'),
+ url('../fonts/Futura-Medium.ttf') format('truetype'),
+ url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
+}
+
/* End of the reset part */
body {
@@ -62,11 +71,12 @@
/* Main Video Frame */
.main-video {
- height: 562px;
+ height: 562px; position: relative;
}
.project-title {
- text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0; font-weight: bold;
+ text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0;
+ font-family: 'Futura-Medium';
}
.tags {
@@ -74,7 +84,8 @@
}
.tags-title {
- line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F; font-weight: bold; text-transform: uppercase;
+ line-height: 40px; padding-left: 20px; font-size: 11px; color: #B8155F;
+ font-family: 'Futura-Medium'; text-transform: uppercase;
}
/* Pictograms on the left */
@@ -161,6 +172,150 @@
background-position: -24px -120px;
}
+/* Annotations */
+
+.annotation {
+ position: absolute;
+}
+
+.annotation-title {
+ font-family: 'Futura-Medium'; text-align: center;
+}
+
+.close-annotation {
+ float: right; text-decoration: none; margin: 0 5px;
+ font-weight: bold; font-size: 20px;
+}
+
+.text-annotation, .slideshow-annotation, .video-annotation {
+ left: 45px; top: 20px; right: 35px;
+}
+
+/* Text annotation */
+
+.text-annotation {
+ background: #ffffff; max-height: 522px; overflow: auto;
+}
+
+.text-annotation .close-annotation {
+ color: #000000;
+}
+
+.text-annotation .annotation-title {
+ font-size: 23px; margin: 24px 0 0;
+}
+
+.text-annotation .annotation-contents {
+ font-family: Georgia, 'Times New Roman', serif;
+ margin: 30px 45px 45px;
+ column-count: 2; column-gap: 60px;
+ -moz-column-count: 2; -moz-column-gap: 60px;
+ -webkit-column-count: 2; -webkit-column-gap: 60px;
+}
+
+.text-annotation p {
+ margin-bottom: 10px;
+}
+
+/* Slideshow annotation */
+
+.slideshow-center {
+ position: relative; background: rgba(0,0,0,.7);
+}
+
+.slideshow-annotation .annotation-title {
+ height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
+}
+
+.slideshow-frame {
+ float: left; width: 650px; min-height: 60px;
+}
+
+.slideshow-image {
+ max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
+}
+
+.slideshow-play-pause {
+ float: left; padding: 10px 15px 11px;
+ background: #3e3e3e; cursor: pointer;
+}
+
+.slideshow-play-pause a {
+ background-image: url(../img/sprites.png); width: 14px; height: 14px;
+ background-position: 0 -194px; display: block;
+}
+
+.slideshow-play-pause.pause a {
+ background-position: -24px -194px;
+}
+
+.slideshow-play-pause:hover {
+ background: #606060;
+}
+
+.slideshow-bottom {
+ clear: both; height: 35px; background: #000000;
+}
+
+.slideshow-annotation .close-annotation,
+.video-annotation .close-annotation {
+ color: #ffffff;
+}
+
+.slideshow-annotation p,
+.video-annotation p {
+ margin: 10px 25px 10px 10px;
+ font-size: 12px; color: #CCCCCC;
+}
+
+.slideshow-description {
+ margin-left: 650px; max-height: 452px; overflow: auto;
+}
+
+.slideshow-center:after {
+ content: "."; visibility: hidden; display: block; height: 1px; clear: both;
+}
+
+.slideshow-title, .slideshow-credits {
+ line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 10px;
+}
+
+.slideshow-title {
+ float: left; color: #cccccc;
+}
+
+.slideshow-credits {
+ float: right; color: #808080;
+}
+
+.slideshow-arrow {
+ position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
+}
+
+.slideshow-arrow a {
+ display: block; height: 24px; width: 14px; background-image: url(../img/sprites.png);
+}
+
+.slideshow-arrow:hover {
+ background-color: rgba(255,255,255,.5);
+}
+
+.slideshow-previous {
+ left: 0;
+}
+
+.slideshow-previous a {
+ background-position: 0 -208px;
+}
+
+.slideshow-next {
+ right: 0;
+}
+
+.slideshow-next a {
+ background-position: -14px -208px;
+}
+
/* Bottom bar */
.bottom-bar {
@@ -168,13 +323,27 @@
}
.play-button {
- float: left; width: 30px; height: 30px; border-radius: 15px;
- background: #555555;
+ float: left; width: 14px; height: 14px;
+ padding: 8px; border-radius: 15px;
+ background: #555555; cursor: pointer;
margin: 8px 0 0 15px;
}
+.play-button:hover {
+ background: #909090;
+}
+
+.play-button a {
+ background-image: url(../img/sprites.png); width: 14px; height: 14px; display: block;
+ background-position: 0 -180px;
+}
+
+.play-button.pause a {
+ background-position: -24px -180px;
+}
+
.chapters-bar {
- margin: 0 19px 0 59px; height: 45px; position: relative;
+ margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
}
.chapter {
@@ -183,6 +352,9 @@
.chapter-block {
width: 100%; height: 45px; background: #303030;
+ margin: 0 -1px;
+ border-style: none solid; border-width: 1px;
+ border-color: #000000;
}
.chapter:hover .chapter-block {
@@ -190,10 +362,92 @@
}
.chapter-title {
- font-size: 9px; text-transform: uppercase; margin: 0 -40px;
- text-align: center; color: #909090; display: none; line-height: 30px;
+ position: absolute; top: 53px; left: -40px; right: -40px;
+ font-size: 9px; text-transform: uppercase;
+ text-align: center; color: #909090; display: none;
+ font-family: 'Futura-Medium';
}
.chapter:hover .chapter-title {
display: block;
}
+
+.chip {
+ position: absolute; width: 11px; height: 11px; top: 17px; border-radius: 6px;
+ margin-left: -6px;
+}
+
+.chip.video {
+ background: #be4477;
+}
+
+.chip.audio {
+ background: #63be6c;
+}
+
+.chip.slideshow {
+ background: #f69058;
+}
+
+.chip.text {
+ background: #5e90cb;
+}
+
+.chip.quote {
+ background: #00aeb5;
+}
+
+.chip.link {
+ background: #8985bb;
+}
+
+.left-hiding-block, .right-hiding-block {
+ position: absolute; width: 6px; height: 11px; top: 17px; background: #000000;
+}
+
+.left-hiding-block {
+ left: -6px;
+}
+
+.right-hiding-block {
+ right: -6px;
+}
+
+.prev-chapter, .next-chapter {
+ width: 12px; height: 16px; margin: 8px 5px;
+ background: url(../img/sprites.png);
+}
+
+.next-chapter {
+ float: right; background-position: -12px -144px;
+}
+
+.next-chapter:hover {
+ background-position: -36px -144px;
+}
+
+.next-chapter.inactive {
+ background-position: -12px -160px;
+}
+
+.prev-chapter {
+ float: left; background-position: 0 -144px;
+}
+
+.prev-chapter:hover {
+ background-position: -24px -144px;
+}
+
+.prev-chapter.inactive {
+ background-position: 0 -160px;
+}
+
+.progress-indicator {
+ position: absolute; top: 0; width: 2px; height: 100%; background: #c0c0c0; /* margin-left: -1px; */
+}
+
+.progress-indicator:hover {
+ background: #ffffff;
+}
+
+/* */