--- a/integration/css/style.css Wed Oct 17 18:24:00 2012 +0200
+++ b/integration/css/style.css Tue Oct 23 18:39:37 2012 +0200
@@ -25,7 +25,7 @@
}
body{
height: 100%;
- background: url(../img/bg.jpg) repeat-x 0 0;
+ background: url(../img/bg.png) repeat-x 0 0;
}
a{
color:#000;
@@ -42,14 +42,15 @@
height: 100%;
}
div.wrap-header{
- background: url(../img/bg-wrap-header.jpg) repeat-x 0 0;
- height: 58px;
+ padding-top: 5px;
+ background-color: #370078;
+ height: 53px;
margin-bottom: 1px;
}
/* header */
div.header{
position: relative;
- background: url(../img/bg-header.jpg) repeat-x 0 0;
+ background-color: #e2dbfd;
height: 60px;
}
div.header div.title-video-wrap, div.header h1, div.header div.profil-wrap{
@@ -65,11 +66,14 @@
div.header h1 a img, div.header h1 a span{
float: left;
}
+div.header h1 a{
+ padding-top: 6px;
+}
div.header h1 a span{
font-family: 'OpenSans-Light';
font-size: 20px;
text-align: center;
- padding: 6px 0 0 6px;
+ padding: 0px 0 0 6px;
}
div.header div.title-video-wrap{
width: 460px;
@@ -127,7 +131,7 @@
div.content{
width: 960px;
min-height: 750px;
- background: url(../img/bg-degrade.jpg) 0 0 repeat-x;
+ background: url(../img/bg-degrade.png) 0 0 repeat-x;
}
div.col-middle, div.col-left, div.col-right{
@@ -139,11 +143,10 @@
}
div.col-middle-header{
height: 35px;
- background: url(../img/bg-previsualiser.jpg) repeat-x 0 0;
+ background: url(../img/bg-previsualiser.png) repeat-x 0 0;
line-height: 35px;
font-size: 16px;
font-family: 'OpenSans-SemiboldItalic';
-
}
div.col-middle-header a{
color: #30036d;
@@ -159,9 +162,16 @@
display: inline-block;
min-width: 210px;
height: 35px;
- background: url(../img/bg-segmenter.jpg) repeat-x 0 0;
+ background: url(../img/bg-segmenter.png) repeat-x 0 0;
}
+div.col-middle-header a.segmenter.disable,
+div.col-middle-header a.previsualiser.disable,
+div.col-middle-header.disable {
+ background-position: 0 -35px;
+}
+
div.col-middle-header a.previsualiser{
+ background: url(../img/bg-previsualiser.png) repeat-x 0 0;
float: right;
padding-right: 10px;
}
@@ -179,10 +189,7 @@
top: 10px;
}
div.col-middle div.video a.publier-button:hover{
- background-color: #666;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
+ background-position: 0 -67px;
}
div.col-middle div.video a.publier-button.disable{
background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
@@ -237,14 +244,127 @@
background: url(../img/bg-indication.png) 15px 0 no-repeat;
margin-left: -15px;
}
+
+/******* bloc ******/
+div.bloc-pvw{
+ display: none;
+}
+
+
+div.bloc-segmentation{
+ position: relative;
+}
+div.popin.segmentation{
+ top: 376px;
+ width: 100%;
+}
+div.popin.segmentation img.pointer{
+ left: 222px ;
+}
+div.popin.segmentation h2{
+ font-size: 14px;
+ font-family: 'OpenSans-Semibold';
+ color:#de2500;
+ margin-bottom: 10px;
+}
+div.popin.segmentation h2 span{
+ color: #7628df;
+}
+div.popin.segmentation form{
+ overflow: hidden;
+}
+div.popin.segmentation form div.form-segment-left,
+div.popin.segmentation form div.form-segment-right{
+ float: left;
+}
+div.popin.segmentation form div.form-segment-left{
+ width: 228px;
+}
+div.popin.segmentation form p{
+ margin-bottom: 8px;
+}
+div.popin.segmentation form label{
+ display: block;
+ font-size: 12px;
+ font-family: 'OpenSans-Semibold';
+ margin-bottom: 4px;
+}
+div.popin.segmentation form textarea{
+ width: 200px;
+ height: 66px;
+ max-width: 200px;
+ font-size: 12px;
+}
+div.popin.segmentation form input[type=text]{
+ font-size: 12px;
+ width: 200px;
+ height: 20px;
+}
+div.bloc-segmentation div.existant{
+ margin-top: 190px;
+
+}
+div.bloc-segmentation div.existant h2{
+ color: #30036d;
+ font-size: 14px;
+ font-family: 'OpenSans-Semibold';
+ padding-left: 8px;
+ margin-bottom: 8px;
+}
+div.bloc-segmentation div.segment{
+ width: 100%;
+ height: 8px;
+ background-color: #b6b8b8;
+ margin-bottom: 5px;
+ position: relative;
+}
+div.bloc-segmentation div.segment div.section{
+ background-color: #ff7f0e;
+ height: 6px;
+ border:1px solid #999999;
+ position: absolute;
+}
+div.bloc-segmentation div.segment div.popin.segment-section{
+ top: 8px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section h2{
+ padding: 0;
+ color: #de2500;
+ margin-bottom: 4px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section p{
+ font-size: 12px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section p span{
+ color: #7628df;
+}
+
+div.bloc-segmentation div.segment div.popin.segment-section a.reprendre-segment{
+ float: right;
+ display: block;
+ height: 20px;
+ line-height: 20px;
+}
+div.bloc-segmentation div.segment div.popin.segment-section div.instant-description{
+ float: left;
+ margin-right: 16px;
+}
+
+
+
+
+
+
+
+
/* col-left */
div.col-left, div.col-right{
width: 250px;
min-height: 750px;
- background: url(../img/bg-col.jpg) repeat-x 0 0 #e6e6e6;
+ background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6;
}
div.col-left form{
- background: url(../img/bg-video-search.jpg) 0 0 repeat-x #906ebe;
+ background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe;
height: 70px;
padding-left: 10px;
margin-bottom: 1px;
@@ -282,8 +402,10 @@
position: absolute;
right: 2px;
width: 20px;
+ top: 0;
height: 20px;
border: none;
+ z-index: 2;
background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
}
div.col-left ul.list-video li a:hover,div.col-left ul.list-video li a.active{
@@ -298,7 +420,7 @@
}
div.col-right div.liste-segment{
height: 70px;
- background: url(../img/bg-liste-segment.jpg) repeat-x 0 0;
+ background: url(../img/bg-liste-segment.png) repeat-x 0 0;
padding: 0 10px;
width: 230px;
}
@@ -347,7 +469,7 @@
div.popin div.popin-content{
padding: 8px;
border: 1px solid #867a97;
- background: url(../img/bg-jaune.jpg);
+ background: url(../img/bg-jaune.png);
}
div.popin input[type=text],div.popin input[type=password], div.popin textarea{
padding: 0 6px;
@@ -444,36 +566,97 @@
}
-div.user.popin.signup div.popin-content h2{
+div.user.popin.signup div.popin-content h2,
+div.user.popin.login div.popin-content h2{
color: #de2500;
font-size: 14px;
margin-bottom: 12px;
}
-div.user.popin.signup div.popin-content form label{
+div.user.popin.signup div.popin-content form label,
+div.user.popin.login div.popin-content form label{
width: 84px;
font-size: 12px;
display: inline-block;
float: left;
- vertical-align: middle;
+ line-height: 12px;
}
-div.user.popin.signup div.popin-content form p{
+div.user.popin.signup div.popin-content form p,
+div.user.popin.login div.popin-content form p{
display: block;
line-height: 18px;
- margin-bottom: 6px;
- overflow: auto;
-
+ margin-bottom: 8px;
+ overflow: hidden;
}
div.user.popin.signup div.popin-content form input[type=text],
-div.user.popin.signup div.popin-content form input[type=password]{
+div.user.popin.signup div.popin-content form input[type=password],
+div.user.popin.login div.popin-content form input[type=text],
+div.user.popin.login div.popin-content form input[type=password]{
float: left;
position: relative;
width: 110px;
padding: 0 5px;
height: 18px;
display: inline-block;
- vertical-align: middle;
+}
+div.user.popin.login div.popin-content a.signup-button{
+ background-color: #de2500;
+}
+
+
+div.user.popin.signup div.popin-content form input[type=submit],
+div.user.popin.login div.popin-content form input[type=submit],
+div.user.popin.login a.signup-button ,
+div.popin.segmentation form input[type=submit],
+div.popin.segment-section a.reprendre-segment{
+ margin-top: 2px;
+ font-family: 'OpenSans-Regular';
+ display: block;
+ font-size: 12px;
+ border: 0;
+ width: 150px;
+ padding: 1px 0;
+ background-color: #30036D;
+ color: #FFF;
+ text-align: center;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ float: right;
+ cursor: pointer;
}
+
+
+div.user.popin.signup div.popin-content form input[type=submit]:hover,
+div.user.popin.login div.popin-content form input[type=submit]:hover,
+div.user.popin.login div.popin-content a.signup-button:hover,
+div.popin.segmentation form input[type=submit]:hover,
+div.popin.segment-section a.reprendre-segment:hover{
+ background-color: #FF00FC
+}
+
+
+
+
+
+
+div.user.popin.signup {
+ display: none;
+}
+div.user.popin.info {
+ display: none;
+}
+div.user.popin.login {
+ display: none;
+}
+
+
+
+
+
+
+
+
/* frise-description */
div.frise-description.popin{
top: 26px;
@@ -634,7 +817,6 @@
}
div.footer ul.links-left{
float: left;
-
}
div.footer ul.links-left li{
margin-bottom: 4px;
--- a/integration/edition.html Wed Oct 17 18:24:00 2012 +0200
+++ b/integration/edition.html Tue Oct 23 18:39:37 2012 +0200
@@ -15,7 +15,7 @@
<body>
<div class="wrap">
<div class="wrap-header">
- <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.jpg" alt="Bibliothèque centre Pompidou" /></a>
+ <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
</div>
<div class="header">
<!-- popin header -->
@@ -72,13 +72,40 @@
<label for="signup-password">Confirmer le mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
+ <p>
+ <input type="submit" value="Créer le compte">
+ </p>
</form>
</div>
</div><!-- popin user signup-->
+ <div class="popin user login" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Connexion :</h2>
+ <form action="#">
+ <p>
+ <label for="signup-pseudo">E-mail : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p >
+ <label for="signup-email">Mot de passe : </label>
+ <input type="password" id="signup-email" name="" />
+ </p>
+ <p>
+ <input type="submit" value="Se connecter">
+ </p>
+ <p>
+ <a class="signup-button" href="#">Créer un compte</a>
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user login-->
+
<h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
- <img src="img/hashcut-logo.jpg" alt="Hashcut" />
+ <img src="img/hashcut-logo.png" alt="Hashcut" />
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
@@ -137,6 +164,75 @@
</div><!-- col-left -->
<div class="col-middle">
+ <div class="bloc-segmentation">
+ <div class="col-middle-header disable">
+ <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
+ <a href="#" class="previsualiser disable">Prévisualiser</a>
+ </div>
+ <div class="video">
+ <a class="publier-button" title="Publier" href="#"></a>
+ <img src="img/visuel-player.png" alt="" />
+ </div>
+ <div class="segment">
+ <img src="img/visuel-segment.png" alt="">
+ </div>
+ <div class="popin segmentation" id="">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2>
+ <form action="#">
+ <div class="form-segment-left">
+ <p>
+ <label for="titre">Titre :</label>
+ <input type="text" id="titre" />
+ </p>
+ <p>
+ <label for="tags">Tags :</label>
+ <input type="text" id="tags" />
+ </p>
+ </div>
+ <div class="form-segment-right">
+ <p>
+ <label for="description">Description :</label>
+ <textarea id="description"></textarea>
+ </p>
+ <p>
+ <input type="submit" value="Ajouter au Hashcut" />
+ </p>
+ </div>
+
+ </form>
+ </div>
+ </div><!-- popin segmentation -->
+
+ <div class="existant">
+ <h2>Segments existants :</h2>
+ <div class="segments">
+ <div class="segment">
+ <div class="section" style="left:0%;width:20%;"></div>
+ <div class="popin segment-section" id="">
+ <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content clearfix">
+ <div class="instant-description">
+ <h2>Le moment crucial où le maïs explose</h2>
+ <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
+ </div>
+ <a href="#" class="reprendre-segment">Reprendre le segment</a>
+ </div>
+ </div><!-- popin segment-section -->
+ </div>
+ <div class="segment">
+ <div class="section" style="left:20%;width:20%;"></div>
+ </div>
+ <div class="segment">
+ <div class="section" style="left:60%;width:20%;"></div>
+ </div>
+ <div class="segment">
+ <div class="section" style="left:80%;width:10%;"></div>
+ </div>
+ </div>
+ </div>
+ </div><!-- bloc-segmentation -->
<div class="bloc-pvw">
<div class="col-middle-header">
@@ -277,8 +373,8 @@
<li><a href="#">Contacts</a></li>
</ul>
<ul class="links-right">
- <li><a title="IRI" href="#"> <img src="img/logo-iri.png" alt="iri" /></a></li>
- <li><a title="cinecast" href="#"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+ <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
+ <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
<li>© 2012</li>
</ul>
</div>
Binary file integration/img/publier-button-sprite.png has changed
