diff -r d7bcf5f39b6c -r eddf4d5db875 player/css/styles.css --- 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; }