--- a/player/css/styles.css Fri Jun 07 17:24:56 2013 +0200
+++ b/player/css/styles.css Mon Jun 10 18:33:43 2013 +0200
@@ -43,6 +43,8 @@
border: none;
}
+/* End of the reset part */
+
html {
overflow: hidden;
}
@@ -50,39 +52,83 @@
/* 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');
+ font-family: 'OpenSans';
+ font-weight: 400;
+ src: url('../fonts/OpenSans-Regular.woff') format('woff'),
+ url('../fonts/OpenSans-Regular.ttf') format('truetype'),
+ url('../fonts/OpenSans-Regular.svg#OpenSans') format('svg');
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ font-weight: 700;
+ src: url('../fonts/OpenSans-Bold.woff') format('woff'),
+ url('../fonts/OpenSans-Bold.ttf') format('truetype'),
+ url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') 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');
+ font-family: 'OpenSans';
+ font-weight: 800;
+ src: url('../fonts/OpenSans-ExtraBold.woff') format('woff'),
+ url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'),
+ url('../fonts/OpenSans-ExtraBold.svg#OpenSans-Extrabold') format('svg');
}
-/* End of the reset part */
+@font-face {
+ font-family: 'OpenSans-CondensedBold';
+ src: url('../fonts/OpenSans-CondBold.woff') format('woff'),
+ url('../fonts/OpenSans-CondBold.ttf') format('truetype'),
+ url('../fonts/OpenSans-CondBold.svg#OpenSans-CondensedBold') format('svg');
+}
body {
- background: #000000; font-family: Helvetica, Arial, sans-serif;
+ background: #000000; font-family: 'OpenSans'; font-weight: 400;
}
/* Top Bar */
.top-bar {
- height: 40px;
+ position: absolute; left: 0; right: 0; top: 0; height: 40px;
+}
+
+.topright-buttons {
+ float: right;
+}
+
+.topright-buttons a {
+ float: left; background-image: url(../img/sprites.png); margin: 8px 8px 0 0; opacity: .5;
+ transition: opacity 0.5s; -webkit-transition: opacity 0.5s; width: 24px; height: 24px;
+}
+
+.topright-buttons a:hover {
+ opacity: 1;
+}
+
+.about {
+ background-position: -24px -232px;
+}
+
+.full-screen {
+ background-position: 0 -232px;
}
/* Main Video Frame */
.main-video {
- height: 562px; position: relative;
+ position: absolute; z-index: 1; top: 40px; left: 0; right: 0; bottom: 96px;
+}
+
+.video-container {
+ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+}
+
+.video-container video {
+ max-width: 100%; max-height: 100%; margin: 0 auto; display: block;
}
.project-title {
text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0;
- font-family: 'Futura-Medium';
+ font-weight: 700;
}
.tags {
@@ -91,7 +137,7 @@
.tags-title {
line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
- font-family: 'Futura-Medium'; text-transform: uppercase;
+ font-weight: 700; text-transform: uppercase;
}
.tags:hover .tags-title {
@@ -146,14 +192,14 @@
.pictolist {
position: absolute;
- left: 14px; bottom: 24px;
+ left: 0; bottom: 0; margin: 0 0 24px 14px;
}
.pictolist li {
line-height: 38px; opacity: 0; display: none; height: 0;
padding: 6px; width: 38px; overflow: hidden;
- -webkit-transition: width 0.8s;
- transition: width 0.8s;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
}
.pictolist li.hover {
@@ -163,14 +209,14 @@
.picto {
float: left; padding: 7px; background:black;
border-radius: 19px; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.picto-title {
margin-left: 8px; font-size: 12px; text-transform: uppercase;
padding: 4px 6px; background: rgba(0, 0, 0, .7);
- font-family: 'Futura-CondensedExtraBold';
+ font-family: 'OpenSans-CondensedBold';
}
.found .picto-title {
@@ -278,7 +324,7 @@
}
.annotation-title {
- font-family: 'Futura-Medium'; text-align: center;
+ font-weight: 800; text-align: center;
}
.close-annotation {
@@ -287,10 +333,10 @@
.annotation {
left: 45px; top: 800px; right: 35px;
- transition: top 0.8s; -webkit-transition: top 0.8s;
+ transition: top 0.5s; -webkit-transition: top 0.5s;
}
-.annotation-main:after {
+.annotation-main:after, .about-collaboration:after {
content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
}
@@ -354,25 +400,25 @@
}
.text-contents p, .text-contents ul, .text-contents ol {
-/* column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; */
margin-bottom: 10px;
}
.text-contents h2, .text-contents h3, .text-contents h4 {
/* text-align: center; */
- font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
+ font-family: 'OpenSans-CondensedBold'; margin: 12px 0;
+ text-transform: uppercase;
}
.text-contents img {
float: left; margin: 0 5px 2px 0;
}
-/*
+
.column-group {
column-count: 2; column-gap: 60px;
-moz-column-count: 2; -moz-column-gap: 60px;
-webkit-column-count: 2; -webkit-column-gap: 60px;
}
-*/
+
.text-contents h2 {
font-size: 21px;
}
@@ -468,8 +514,8 @@
.slideshow-play-pause {
float: left; padding: 10px 15px 11px;
background: #404040; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-play-pause a {
@@ -494,13 +540,13 @@
}
.slideshow-title {
- line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
+ line-height: 35px; margin: 0 15px; font-weight: 700; font-size: 13px; color: #cccccc; float: left;
}
.slideshow-arrow {
position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-arrow a {
@@ -527,19 +573,41 @@
background-position: -14px -208px;
}
+/* About box */
+
+.about-box {
+ overflow: visible;
+}
+
+.about-box h3 {
+ text-align: center; font-weight: 700; font-size: 16px;
+}
+
+.about-collaboration {
+ margin: 5px 0 40px;
+}
+
+.about-collaboration li {
+ width: 50%; float: left; text-align: center; font-size: 14px;
+}
+
+.about-collaboration img {
+ display: block; margin: 5px auto; height: 120px;
+}
+
/* Bottom bar */
.bottom-bar {
- padding-top: 20px;
+ position: absolute; bottom: 0; left: 0; right: 0; height: 81px;
}
.play-button {
float: left; width: 14px; height: 14px;
padding: 8px; border-radius: 15px;
- background: #555555; cursor: pointer;
- margin: 8px 0 0 15px;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ background: #404040; cursor: pointer;
+ margin: 15px 0 0 15px;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.play-button:hover {
@@ -555,9 +623,20 @@
background-position: -24px -180px;
}
+.timelines {
+ margin: 0 20px 0 60px;
+}
+
+.timeline {
+ background: #303030; height: 12px; position: relative; cursor: pointer;
+}
+
+.annotation-onscreen .timeline {
+ background: #181818;
+}
+
.chapters-bar {
- margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
- transition: opacity 0.8s;
+ margin-top: 3px; height: 42px; position: relative; cursor: pointer;
}
.chapter {
@@ -565,16 +644,16 @@
}
.chapter-block {
- width: 100%; height: 45px; background: #303030;
+ width: 100%; height: 42px; background: #303030;
margin: 0 -1px;
border-style: none solid; border-width: 1px;
border-color: #000000;
- -webkit-transition: background 0.8s, opacity 0.8s;
- transition: background 0.8s, opacity 0.8s;
+ -webkit-transition: background 0.5s, opacity 0.5s;
+ transition: background 0.5s, opacity 0.5s;
}
.chapter.active .chapter-block {
- background: #404040;
+ background: #505050;
}
.chapter.found .chapter-block {
@@ -586,12 +665,12 @@
}
.chapter-title {
- position: absolute; top: 53px; left: 50%; width: 300px; margin-left: -150px;
+ position: absolute; top: 46px; left: 50%; width: 300px; margin-left: -150px;
font-size: 9px; text-transform: uppercase;
text-align: center; color: #909090; opacity: 0;
- font-family: 'Futura-Medium';
- -webkit-transition: background 0.8s;
- transition: opacity 0.8s;
+ font-weight: 700;
+ -webkit-transition: background 0.5s;
+ transition: opacity 0.5s;
}
.chapter.active .chapter-title {
@@ -603,13 +682,13 @@
}
.chip-circle {
- width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
- -webkit-transition: background 0.8s, opacity 0.8s;
- transition: background 0.8s, opacity 0.8s;
+ width: 11px; height: 11px; top: 15px; left: -5px; border-radius: 6px; position: absolute;
+ -webkit-transition: background 0.5s, opacity 0.5s;
+ transition: background 0.5s, opacity 0.5s;
}
.chip-pole {
- position: absolute; top: 0; left: 0; width: 0; height: 17px; border-left: 1px solid; display: none;
+ position: absolute; top: 0; left: 0; width: 0; height: 15px; border-left: 1px solid; display: none;
}
.chip.hover .chip-pole {
@@ -617,10 +696,11 @@
}
.chip-title {
- position: absolute; top: 1px; left: 3px; font-size: 9px; line-height: 13px; height: 13px;
+ position: absolute; top: 1px; left: 3px; font-size: 10px; line-height: 13px; height: 13px;
+ font-weight: 700;
display: block; width: 0; overflow: hidden;
- -webkit-transition: width 0.8s;
- transition: width 0.8s;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
}
.chip.hover .chip-title {
@@ -687,7 +767,7 @@
.prev-chapter, .next-chapter {
position: absolute; z-index: 4;
- width: 12px; height: 16px; margin: 8px 5px;
+ width: 12px; height: 16px; margin: 4px 5px;
background: url(../img/sprites.png); cursor: pointer;
}
@@ -715,12 +795,24 @@
background-position: 0 -160px;
}
-.progress-indicator {
- position: absolute; top: 0; width: 2px; height: 100%; background: #c0c0c0; /* margin-left: -1px; */
+.elapsed {
+ position: absolute; background: #505050; left: 0; top: 0; height: 100%;
+}
+
+.annotation-onscreen .elapsed {
+ background: #282828;
}
-.progress-indicator:hover {
- background: #ffffff;
+.progress-indicator, .mouse-progress-indicator {
+ position: absolute; top: 0; width: 2px; height: 100%; margin-left: -1px;
+}
+
+.progress-indicator {
+ background: #c0c0c0;
+}
+
+.mouse-progress-indicator {
+ background: #B8155F; display: none;
}
/* */