player/css/styles.css
changeset 6 eddf4d5db875
parent 5 d7bcf5f39b6c
child 7 d708a1da0ea2
--- a/player/css/styles.css	Fri May 24 18:49:09 2013 +0200
+++ b/player/css/styles.css	Mon May 27 18:54:46 2013 +0200
@@ -84,7 +84,7 @@
 }
 
 .tags-title {
-    line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
+    line-height: 40px; padding: 0 15px; font-size: 11px; color: #cc40c0;
     font-family: 'Futura-Medium'; text-transform: uppercase;
 }
 
@@ -106,7 +106,11 @@
 }
 
 .tag:hover {
-    color: #B8155F; background: #202020;
+    color: #cc40c0; background: #202020;
+}
+
+.tag.found {
+    color: #cc40c0;
 }
 
 /* Annotation colors */
@@ -152,9 +156,14 @@
     border-radius: 19px; cursor: pointer;
 }
 
+.found .picto {
+    box-shadow: 0 0 8px #ff00f0;
+    border: 2px solid #800078; padding: 5px;
+}
+
 .picto-title {
     margin-left: 10px; font-size: 12px; text-transform: uppercase;
-    display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium';
+    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 {
@@ -165,11 +174,13 @@
     background: url(../img/sprites.png); display: block; width: 24px; height: 24px;
 }
 
-.video.hover .picto {
+.video.hover .picto ,
+.video.current .picto {
     background: #be4477;
 }
 
-.video.hover .picto a {
+.video.hover .picto a ,
+.video.current .picto a {
     background-position: -24px 0;
 }
 
@@ -177,11 +188,13 @@
     background-position: 0 -24px;
 }
 
-.audio.hover .picto {
+.audio.hover .picto,
+.audio.current .picto {
     background: #63be6c;
 }
 
-.audio.hover .picto a {
+.audio.hover .picto a ,
+.audio.current .picto a {
     background-position: -24px -24px;
 }
 
@@ -189,11 +202,13 @@
     background-position: 0 -48px;
 }
 
-.slideshow.hover .picto {
+.slideshow.hover .picto ,
+.slideshow.current .picto {
     background: #f69058;
 }
 
-.slideshow.hover .picto a {
+.slideshow.hover .picto a ,
+.slideshow.current .picto a {
     background-position: -24px -48px;
 }
 
@@ -201,11 +216,13 @@
     background-position: 0 -72px;
 }
 
-.text.hover .picto {
+.text.hover .picto ,
+.text.current .picto {
     background: #5e90cb;
 }
 
-.text.hover .picto a {
+.text.hover .picto a ,
+.text.current .picto a {
     background-position: -24px -72px;
 }
 
@@ -213,11 +230,13 @@
     background-position: 0 -96px;
 }
 
-.quote.hover .picto {
+.quote.hover .picto ,
+.quote.current .picto {
     background: #00aeb5;
 }
 
-.quote.hover .picto a {
+.quote.hover .picto a ,
+.quote.current .picto a {
     background-position: -24px -96px;
 }
 
@@ -225,11 +244,13 @@
     background-position: 0 -120px;
 }
 
-.link.hover .picto {
+.link.hover .picto ,
+.link.current .picto {
     background: #8985bb;
 }
 
-.link.hover .picto a {
+.link.hover .picto a ,
+.link.current .picto a {
     background-position: -24px -120px;
 }
 
@@ -252,32 +273,37 @@
     font-weight: bold; font-size: 20px;
 }
 
-.text-annotation, .slideshow-annotation, .video-annotation, .audio-annotation {
+.annotation {
     left: 45px; top: 20px; right: 35px;
 }
 
 /* Text annotation */
 
-.text-annotation {
+.text-annotation,
+.link-annotation,
+.audio-annotation {
     background: #ffffff; max-height: 522px; overflow: auto;
 }
 
 .text-annotation .close-annotation,
-.audio-annotation .close-annotation {
+.audio-annotation .close-annotation,
+.link-annotation .close-annotation {
     color: #000000;
 }
 
 .text-annotation .close-annotation:hover,
-.audio-annotation .close-annotation:hover {
+.audio-annotation .close-annotation:hover,
+.link-annotation .close-annotation:hover {
     color: #666666;
 }
 
 .text-annotation .annotation-title,
-.audio-annotation .annotation-title {
+.audio-annotation .annotation-title,
+.link-annotation .annotation-title {
     font-size: 23px; margin: 24px 0;
 }
 
-.text-annotation .annotation-contents {
+.text-contents {
     font-family: Georgia, 'Times New Roman', serif;
     margin: 0 45px 35px;
     column-count: 2; column-gap: 60px;
@@ -285,23 +311,92 @@
     -webkit-column-count: 2; -webkit-column-gap: 60px;
 }
 
-.text-annotation p {
-    margin-bottom: 10px;
+.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; font-size: 15px;
+}
+
+.text-contents h2, .text-contents h3, .text-contents h4 {
+    font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
+    column-break-after:avoid; -moz-column-break-after:avoid; -webkit-column-break-after:avoid;
+    column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;
+}
+
+.text-contents h2 {
+    font-size: 21px;
+}
+
+.text-contents h3 {
+    font-size: 18px;
+}
+
+.text-contents h4 {
+    font-size: 15px;
+}
+
+.text-contents b, .text-contents strong {
+    font-weight: bold;
+}
+
+.text-contents em, .text-contents i {
+    font-style: italic;
+}
+
+.text-contents a {
+    color: #5E90CB;
+}
+
+.text-contents ul {
+    list-style: disc; padding-left: 2em;
+}
+
+.text-contents ol {
+    list-style: decimal; padding-left: 2em;
+}
+
+.text-contents li {
+    list-style: inherit; margin: 2px 0;
+}
+
+/* Link annotation */
+
+.link-contents {
+    font-family: Georgia, 'Times New Roman', serif;
+    margin: 0 80px 35px;
+}
+
+.link-contents p {
+    text-align: center; font-size: 23px; margin: 30px 0;
+}
+
+.link-contents a {
+    color: #000000;
 }
 
 /* Audio annotation */
 
-.audio-annotation {
-    background: #ffffff;
+.audio-description {
+    font-family: Georgia, 'Times New Roman', serif;
+    margin: 35px 45px; font-size: 15px;
+}
+
+.audio-frame {
+    margin: 0 45px;
+}
+
+.audio-description p {
+    margin-bottom: 10px;
 }
 
 /* Slideshow annotation */
 
-.slideshow-center {
+.slideshow-center,
+.video-center {
     position: relative; background: rgba(0,0,0,.7);
 }
 
-.slideshow-annotation .annotation-title {
+.slideshow-annotation .annotation-title,
+.video-annotation .annotation-title {
     height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
 }
 
@@ -309,6 +404,10 @@
     float: left;
 }
 
+.video-frame {
+    float: left; width: 650px;
+}
+
 .slideshow-image {
     max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
 }
@@ -355,7 +454,12 @@
     max-height: 452px; overflow: auto;
 }
 
-.slideshow-center:after {
+.video-description {
+    max-height: 487px; overflow: auto;
+}
+
+.slideshow-center:after,
+.video-center:after {
     content: "."; visibility: hidden; display: block; height: 1px; clear: both;
 }
 
@@ -437,11 +541,7 @@
 }
 
 .chapter.found .chapter-block {
-    background: #510829;
-}
-
-.chapter.found.active .chapter-block {
-    background: #8a1249;
+    box-shadow: 0 0 20px rgba(255, 0, 240, .6) inset;
 }
 
 .annotation-onscreen .chapter-block {
@@ -460,7 +560,7 @@
 }
 
 .chip {
-    position: absolute; top: 0;
+    position: absolute; top: 0; width: 1px;
 }
 
 .chip-circle {
@@ -472,8 +572,11 @@
     display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
 }
 
-.chip.hover .chip-title,
-.chip.current .chip-title {
+.left .chip-title {
+    border-left: none; border-right: 1px solid; left: auto; right: 0; text-align: right;
+}
+
+.chip.hover .chip-title {
     display: block;
 }
 
@@ -486,6 +589,11 @@
     opacity: 1;
 }
 
+.found .chip-circle {
+    box-shadow: 0 0 8px #ff00f0;
+    border: 2px solid #800078; width: 9px; height: 9px;
+}
+
 .video .chip-circle {
     background: #be4477;
 }