# HG changeset patch # User Anthony Ly # Date 1351089055 -7200 # Node ID 523828fb7c78c9d7cdbd591abb48b858c6ac8560 # Parent 12978893bbf04fa9fdb34a233dd7f2403e426101 simplification syntaxe css diff -r 12978893bbf0 -r 523828fb7c78 integration/css/common.css --- a/integration/css/common.css Wed Oct 24 15:38:36 2012 +0200 +++ b/integration/css/common.css Wed Oct 24 16:30:55 2012 +0200 @@ -58,7 +58,7 @@ text-decoration: none; } /* common */ -div.wrap{ +.wrap{ min-height:100%; background-color: #FFF; width: 960px; @@ -69,45 +69,48 @@ font-size: 13px; height: 100%; } -div.wrap-header{ +.wrap-header{ padding-top: 5px; background-color: #370078; height: 53px; margin-bottom: 1px; } /* header */ -div.header{ +.header{ position: relative; background-color: #e2dbfd; height: 60px; } -div.header div.title-video-wrap, div.header h1, div.header div.profil-wrap{ +.header .title-video-wrap, +.header h1, +.header .profil-wrap{ position: relative; float: left; height: 60px; } -div.header h1{ +.header h1{ display: inline-block; height: 60px; width: 250px; } -div.header h1 a img, div.header h1 a span{ +.header h1 a img, +.header h1 a span{ float: left; } -div.header h1 a{ +.header h1 a{ padding-top: 6px; } -div.header h1 a span{ +.header h1 a span{ font-size: 20px; text-align: center; padding: 0px 0 0 6px; font-weight: 300; } /* header - profil-wrap */ -div.header div.profil-wrap{ +.header .profil-wrap{ width: 250px; } -div.header div.profil-wrap a{ +.header .profil-wrap a{ width: 160px; display: block; text-align: right; @@ -117,40 +120,42 @@ color: #30036d; padding-right: 18px; } -div.header div.profil-wrap a:hover{ +.header .profil-wrap a:hover{ color: #FF00FC; } -div.header div.profil-wrap a.all-hashcut{ +.header .profil-wrap a.all-hashcut{ top: 12px; background: url(../img/arrow-top.png) right 2px no-repeat; } -div.header div.profil-wrap a.my-profil{ +.header .profil-wrap a.my-profil{ top: 32px; background: url(../img/arrow-bot.png) right 4px no-repeat; } /* content */ -div.content{ +.content{ width: 960px; min-height: 750px; background: url(../img/bg-degrade.png) 0 0 repeat-x; } /* popin */ -div.popin{ +.popin{ padding-top: 12px; position: absolute; top: 0; z-index: 10; } -div.popin img.pointer{ +.popin img.pointer{ position: absolute; top: 0; } -div.popin div.popin-content{ +.popin .popin-content{ padding: 8px; border: 1px solid #867a97; background: url(../img/bg-jaune.png); } -div.popin input[type=text],div.popin input[type=password], div.popin textarea{ +.popin input[type=text], +.popin input[type=password], +.popin textarea{ padding: 0 6px; height: 20px; line-height: 20px; @@ -162,28 +167,28 @@ } /* popin - user */ -div.user.popin.signup { +.user.popin.signup { display: none; } -div.user.popin.info { +.user.popin.info { display: none; } -div.user.popin.login { +.user.popin.login { display: none; } -div.user.popin{ +.user.popin{ top: 48px; right: 0; } -div.user.popin img.pointer{ +.user.popin img.pointer{ right: 36px; } -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{ +.user.popin.signup input[type=submit], +.user.popin.login input[type=submit], +.user.popin.login a.signup-button , +.popin.segmentation input[type=submit], +.popin.segment-section a.reprendre-segment{ margin-top: 2px; display: block; font-size: 12px; @@ -199,38 +204,38 @@ 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{ +.user.popin.signup form input[type=submit]:hover, +.user.popin.login form input[type=submit]:hover, +.user.popin.login a.signup-button:hover, +.popin.segmentation input[type=submit]:hover, +.popin.segment-section a.reprendre-segment:hover{ background-color: #FF00FC } -div.user.popin.signup div.popin-content h2, -div.user.popin.login div.popin-content h2{ +.user.popin.signup .popin-content h2, +.user.popin.login .popin-content h2{ color: #de2500; font-size: 14px; margin-bottom: 12px; } -div.user.popin.signup div.popin-content form label, -div.user.popin.login div.popin-content form label{ +.user.popin.signup .popin-content label, +.user.popin.login .popin-content label{ width: 84px; font-size: 12px; display: inline-block; float: left; line-height: 12px; } -div.user.popin.signup div.popin-content form p, -div.user.popin.login div.popin-content form p{ +.user.popin.signup .popin-content form p, +.user.popin.login .popin-content form p{ display: block; line-height: 18px; 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.login div.popin-content form input[type=text], -div.user.popin.login div.popin-content form input[type=password]{ +.user.popin.signup input[type=text], +.user.popin.signup input[type=password], +.user.popin.login input[type=text], +.user.popin.login input[type=password]{ float: left; position: relative; width: 110px; @@ -239,32 +244,32 @@ display: inline-block; } /* popin - user - info */ -div.user.popin.info div.popin-content{ +.user.popin.info .popin-content{ min-width: 150px; text-align: right; } -div.user.popin.info div.popin-content h2{ +.user.popin.info .popin-content h2{ color: #7628df; font-size: 18px; font-weight: 600; margin-bottom: 2px; } -div.user.popin.info div.popin-content h3{ +.user.popin.info .popin-content h3{ color: #30036d; font-size: 14px; margin-bottom: 10px; } -div.user.popin.info div.popin-content a.nb-hashcut{ +.user.popin.info .popin-content a.nb-hashcut{ color: #de2500; font-size: 14px; text-decoration: underline; display: block; margin-bottom: 12px; } -div.user.popin.info div.popin-content a.nb-hashcut:hover{ +.user.popin.info .popin-content a.nb-hashcut:hover{ text-decoration: none; } -div.user.popin.info div.popin-content a.change-account{ +.user.popin.info .popin-content a.change-account{ text-align: center; height: 20px; width: 150px; @@ -277,42 +282,42 @@ border-radius: 2px; display: block; } -div.user.popin.info div.popin-content a.change-account:hover{ +.user.popin.info .popin-content a.change-account:hover{ background-color: #FF00FC; } /* popin - user - signup */ -div.user.popin.login div.popin-content a.signup-button{ +.user.popin.login .popin-content a.signup-button{ background-color: #de2500; } -div.user.popin.signup div.popin-content{ +.user.popin.signup .popin-content{ min-width: 205px; } /* footer */ -div.footer{ +.footer{ border-top: 1px solid black; width: 100%; padding-top: 8px; } -div.footer ul.links-left{ +.footer .links-left{ float: left; } -div.footer ul.links-left li{ +.footer .links-left li{ margin-bottom: 4px; } -div.footer ul.links-left li a{ +.footer .links-left li a{ border-bottom: 1px solid #cccccc; } -div.footer ul.links-left li a:hover{ +.footer .links-left li a:hover{ border-bottom: none; } -div.footer ul.links-right{ +.footer .links-right{ float: right; } -div.footer ul.links-right li{ +.footer .links-right li{ line-height: 40px; float: right; margin-left: 8px; } -div.footer ul.links-right li img { +.footer .links-right li img { vertical-align: middle; } \ No newline at end of file diff -r 12978893bbf0 -r 523828fb7c78 integration/css/edition.css --- a/integration/css/edition.css Wed Oct 24 15:38:36 2012 +0200 +++ b/integration/css/edition.css Wed Oct 24 16:30:55 2012 +0200 @@ -1,18 +1,18 @@ /* bloc */ -div.bloc-pvw{ +.bloc-pvw{ } -div.bloc-segmentation{ +.bloc-segmentation{ display: none; } -div.bloc-vide{ +.bloc-vide{ display: none; } /* header - title-video-wrap */ -div.header div.title-video-wrap{ +.header .title-video-wrap{ width: 460px; } -div.header div.title-video-wrap a{ +.header .title-video-wrap a{ position: absolute; top: 10px; left: 0; @@ -25,59 +25,59 @@ background-position: right 2px; padding-right: 20px; } -div.header div.title-video-wrap a:hover{ +.header .title-video-wrap a:hover{ text-decoration: none; } -div.header div.title-video-wrap p.time-length{ +.header .title-video-wrap p.time-length{ position: absolute; top: 34px; color: #333333; font-size: 14px; } -div.header div.title-video-wrap p.time-length span{ +.header .title-video-wrap p.time-length span{ color: #de2500; } /* popin - update-title */ -div.update-title.popin{ +.update-title.popin{ top: 34px; left: 150px; } -div.update-title.popin p.form-right, -div.update-title.popin div.form-left{ +.update-title.popin .form-right, +.update-title.popin .form-left{ float: left; } -div.update-title.popin textarea{ +.update-title.popin textarea{ width: 200px; height: 66px; max-width: 530px; } -div.update-title.popin div.form-left{ +.update-title.popin .form-left{ margin-right: 12px; } -div.update-title.popin img.pointer{ +.update-title.popin img.pointer{ left: 110px; } -div.update-title.popin label{ +.update-title.popin label{ display: block; margin-bottom: 4px; } -div.update-title.popin input[type=text]{ +.update-title.popin input[type=text]{ width: 200px; } -div.update-title.popin p.titre-wrap{ +.update-title.popin p.titre-wrap{ margin-bottom: 6px; } /* col */ -div.col-middle, -div.col-left, -div.col-right{ +.col-middle, +.col-left, +.col-right{ float: left; } /* col-middle */ -div.col-middle{ +.col-middle{ width: 460px; } -div.col-middle-header{ +.col-middle-header{ height: 35px; background: url(../img/bg-previsualiser.png) repeat-x 0 0; line-height: 35px; @@ -85,38 +85,39 @@ font-weight: 600px; font-style: italic; } -div.col-middle-header a{ +.col-middle-header a{ color: #30036d; } -div.col-middle-header a:hover{ +.col-middle-header a:hover{ color: #FF00FC; } -div.col-middle-header a.disable, div.col-middle-header a.disable:hover{ +.col-middle-header a.disable, +.col-middle-header a.disable:hover{ color: #796891; } -div.col-middle-header a.segmenter{ +.col-middle-header a.segmenter{ padding: 0 10px; display: inline-block; min-width: 210px; height: 35px; 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 { +.col-middle-header a.segmenter.disable, +.col-middle-header a.previsualiser.disable, +.col-middle-header.disable { background-position: 0 -35px; } -div.col-middle-header a.previsualiser{ +.col-middle-header a.previsualiser{ background: url(../img/bg-previsualiser.png) repeat-x 0 0; float: right; padding-right: 10px; } -div.col-middle div.video{ +.col-middle .video{ width: 460px; position: relative; margin-bottom: 8px; } -div.col-middle div.video a.publier-button{ +.col-middle .video a.publier-button{ position: absolute; width: 69px; height: 67px; @@ -124,34 +125,33 @@ left: 382px; top: 10px; } -div.col-middle div.video a.publier-button:hover{ +.col-middle .video a.publier-button:hover{ background-position: 0 -67px; } -div.col-middle div.video a.publier-button.disable{ +.col-middle .video a.publier-button.disable{ background: url(../img/publier-button-sprite.png) 0 -67px no-repeat; } -div.col-middle div.video a.publier-button.disable:hover{ +.col-middle .video a.publier-button.disable:hover{ background-color: none; } -div.col-middle div.frise{ +.col-middle .frise{ width: 458px; position: relative; height: 22px; } -div.col-middle div.frise div.segment{ +.col-middle .frise .segment{ height: 22px; } -div.col-middle div.frise span.indication{ +.col-middle .frise span.indication{ height: 22px; line-height: 22px; } /* frise */ -div.frise{ +.frise{ position: relative; border: 1px solid #333333; - } -div.frise div.segment{ +.frise .segment{ float: left; margin-left: -1px; border-right: 1px solid #333; @@ -159,16 +159,16 @@ -webkit-box-shadow: inset 0px 2px 2px 0px #333; box-shadow: inset 0px 2px 2px 0px #333; } -div.frise div.segment:first-child{ +.frise .segment:first-child{ -moz-box-shadow: inset 2px 2px 2px 0px #333; -webkit-box-shadow: inset 2px 2px 2px 0px #333; box-shadow: inset 2px 2px 2px 0px #333; margin-left: 0; } -div.frise div.segment:last-child{ +.frise .segment:last-child{ border-right: 0; } -div.frise span.indication{ +.frise span.indication{ display: inline-block; position: absolute; color: #FFF; @@ -180,150 +180,151 @@ margin-left: -15px; } /* col-middle - bloc-segmentation */ -div.bloc-segmentation{ +.bloc-segmentation{ position: relative; } -div.bloc-segmentation div.existant{ +.bloc-segmentation .existant{ margin-top: 190px; } -div.bloc-segmentation div.existant h2{ +.bloc-segmentation .existant h2{ color: #30036d; font-size: 14px; font-weight: 600; padding-left: 8px; margin-bottom: 8px; } -div.bloc-segmentation div.segment{ +.bloc-segmentation .segment{ width: 100%; height: 8px; background-color: #b6b8b8; margin-bottom: 5px; position: relative; } -div.bloc-segmentation div.segment div.section{ +.bloc-segmentation .segment .section{ background-color: #ff7f0e; height: 6px; border:1px solid #999999; position: absolute; } /* col-middle - bloc-segmentation - popin.segmentation */ -div.popin.segmentation{ +.popin.segmentation{ top: 376px; width: 100%; } -div.popin.segmentation img.pointer{ +.popin.segmentation img.pointer{ left: 222px ; } -div.popin.segmentation h2{ +.popin.segmentation h2{ font-size: 14px; font-weight: 600; color:#de2500; margin-bottom: 10px; } -div.popin.segmentation h2 span{ +.popin.segmentation h2 span{ color: #7628df; } -div.popin.segmentation form{ +.popin.segmentation form{ overflow: hidden; } -div.popin.segmentation form div.form-segment-left, -div.popin.segmentation form div.form-segment-right{ +.popin.segmentation form .form-segment-left, +.popin.segmentation form .form-segment-right{ float: left; } -div.popin.segmentation form div.form-segment-left{ +.popin.segmentation form .form-segment-left{ width: 228px; } -div.popin.segmentation form p{ +.popin.segmentation form p{ margin-bottom: 8px; } -div.popin.segmentation form label{ +.popin.segmentation label{ display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; } -div.popin.segmentation form textarea{ +.popin.segmentation textarea{ width: 200px; height: 66px; max-width: 200px; font-size: 12px; } -div.popin.segmentation form input[type=text]{ +.popin.segmentation input[type=text]{ font-size: 12px; width: 200px; height: 20px; } -div.bloc-segmentation div.segment div.popin.segment-section{ +.bloc-segmentation .segment .popin.segment-section{ top: 8px; } -div.bloc-segmentation div.segment div.popin.segment-section h2{ +.bloc-segmentation .segment .popin.segment-section h2{ padding: 0; color: #de2500; margin-bottom: 4px; } -div.bloc-segmentation div.segment div.popin.segment-section p{ +.bloc-segmentation .segment .popin.segment-section p{ font-size: 12px; } -div.bloc-segmentation div.segment div.popin.segment-section p span{ +.bloc-segmentation .segment .popin.segment-section p span{ color: #7628df; } -div.bloc-segmentation div.segment div.popin.segment-section a.reprendre-segment{ +.bloc-segmentation .segment .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{ +.bloc-segmentation .segment .popin.segment-section .instant-description{ float: left; margin-right: 16px; } /* col-middle - bloc-vide */ -div.bloc-vide div.tutorial{ +.bloc-vide .tutorial{ padding: 0 10px; color: #FFF; font-weight: 600; height: 316px; background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333; } -div.bloc-vide div.tutorial h2{ +.bloc-vide .tutorial h2{ padding-top: 16px; font-size: 18px; margin-bottom: 20px; } -div.bloc-vide div.tutorial ol{ +.bloc-vide .tutorial ol{ padding-left: 22px; } -div.bloc-vide div.tutorial ol li:first-child{ +.bloc-vide .tutorial ol li:first-child{ width: 324px; } -div.bloc-vide div.tutorial ol li{ +.bloc-vide .tutorial ol li{ list-style: decimal; font-size: 14px; margin-bottom: 16px; padding-left: 20px; } /* col-left */ -div.col-left, div.col-right{ +.col-left, +.col-right{ width: 250px; min-height: 750px; background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6; } -div.col-left form{ +.col-left form{ background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe; height: 70px; padding-left: 10px; margin-bottom: 1px; } -div.col-left form h2{ +.col-left form h2{ padding-top: 8px; margin-bottom: 12px; color: #30036d; font-size: 16px; font-weight: 600; } -div.col-left form input[type=text]{ +.col-left input[type=text]{ width: 206px; font-size: 14px; border: none; @@ -333,19 +334,19 @@ -moz-border-radius: 4px; border-radius: 4px; } -div.col-left form p{ +.col-left form p{ position: relative; width: 230px; } -div.col-left form input[type=text]::-webkit-input-placeholder{ +.col-left input[type=text]::-webkit-input-placeholder{ color: #b48aed; font-style: italic; } -div.col-left form input[type=text]:-moz-placeholder { +.col-left input[type=text]:-moz-placeholder { color: #b48aed; font-style: italic; } -div.col-left form input[type=submit]{ +.col-left input[type=submit]{ position: absolute; right: 2px; width: 20px; @@ -355,20 +356,21 @@ 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{ +.col-left .list-video li a:hover, +.col-left .list-video li a.active{ background: url(../img/arrow-item-video-sprite.png) -250px 0 no-repeat; } /* col-right */ -div.col-right{ +.col-right{ width: 250px; } -div.col-right div.liste-segment{ +.col-right .liste-segment{ height: 70px; background: url(../img/bg-liste-segment.png) repeat-x 0 0; padding: 0 10px; width: 230px; } -div.col-right div.liste-segment h2{ +.col-right .liste-segment h2{ text-align: right; color: #30036D; font-weight: 600; @@ -376,150 +378,158 @@ margin-bottom: 12px; padding-top: 8px; } -div.col-right div.liste-segment div.frise{ +.col-right .liste-segment .frise{ width: 228px; position: relative; height: 20px; } -div.col-right div.liste-segment div.frise div.segment{ +.col-right .liste-segment .frise .segment{ height: 20px; } -div.col-right div.liste-segment div.frise span.indication{ +.col-right .liste-segment .frise span.indication{ height: 20px; line-height: 20px; } -div.col-right ul.list-video > li{ +.col-right .list-video > li{ position: relative; } -div.col-right ul.list-video > li > a:hover,div.col-right ul.list-video > li > a.active{ +.col-right .list-video > li > a:hover, +.col-right .list-video > li > a.active{ background: url(../img/arrow-item-video-sprite.png) 0 0 no-repeat; } -div.col-right ul.list-video > li ul.tools{ +.col-right .list-video > li .tools{ position: absolute; left: 94px; top: 48px; } /* popin - frise-description */ -div.frise-description.popin{ +.frise-description.popin{ top: 26px; left: 0; width: 458px; } -div.frise-description.popin img.pointer{ +.frise-description.popin img.pointer{ right: 36px; } -div.frise-description.popin h2{ +.frise-description.popin h2{ color: #de2500; font-size: 14px; font-weight: bold; } -div.frise-description.popin table{ +.frise-description.popin table{ font-size: 12px; } -div.frise-description.popin table th{ +.frise-description.popin th{ text-align: left; font-weight: 600; display: block; min-width: 75px; } -div.frise-description.popin table td{ +.frise-description.popin td{ line-height: 15px; padding-left: 2px; } -div.frise-description.popin table th, div.frise-description.popin table td, div.frise-description.popin h2{ +.frise-description.popin th, +.frise-description.popin td, +.frise-description.popin h2{ padding-bottom: 8px; } -div.frise-description.popin ul.tools{ +.frise-description.popin .tools{ float: right; } /* tools */ -ul.tools li{ +.tools li{ float: left; } -ul.tools li a{ +.tools li a{ display: block; width: 17px; height: 17px; background: url(../img/tools-sprite.png) no-repeat 0 0; } -ul.tools li a.edit{ +.tools li a.edit{ background-position: 2px 0; } -ul.tools li a.edit:hover{ +.tools li a.edit:hover{ background-position: 2px -32px; } -ul.tools li a.edit.disable:hover, ul.tools li a.edit.disable{ +.tools li a.edit.disable:hover, +.tools li a.edit.disable{ background-position: 2px -16px; } -ul.tools li a.bottom{ +.tools li a.bottom{ background-position: -19px 0; } -ul.tools li a.bottom:hover{ +.tools li a.bottom:hover{ background-position: -19px -32px; } -ul.tools li a.bottom.disable:hover, ul.tools li a.bottom.disable{ +.tools li a.bottom.disable:hover, +.tools li a.bottom.disable{ background-position: -19px -16px; } -ul.tools li a.top{ +.tools li a.top{ background-position: -40px 0; } -ul.tools li a.top:hover{ +.tools li a.top:hover{ background-position: -40px -32px; } -ul.tools li a.top.disable:hover, ul.tools li a.top.disable{ +.tools li a.top.disable:hover, +.tools li a.top.disable{ background-position: -40px -16px; } -ul.tools li a.delete{ +.tools li a.delete{ background-position: -61px 0; } -ul.tools li a.delete:hover{ +.tools li a.delete:hover{ background-position: -61px -32px; } -ul.tools li a.delete.disable:hover, ul.tools li a.delete.disable{ +.tools li a.delete.disable:hover, +.tools li a.delete.disable{ background-position: -61px -16px; } /* list-video */ -ul.list-video > li{ +.list-video > li{ margin-bottom: 1px; } -ul.list-video > li > a{ +.list-video > li > a{ padding: 5px 0 5px 10px; position: relative; clear: both; width: 240px; height: 62px; } -ul.list-video li a img, ul.list-video li a span.video-info{ +.list-video li a img, +.list-video li a span.video-info{ float: left; } -ul.list-video li a img{ +.list-video li a img{ margin-right: 4px; } -ul.list-video li a span.video-info{ +.list-video li a span.video-info{ display: block; width: 150px; } -ul.list-video li a span.video-info span.title-video{ +.list-video li a .video-info .title-video{ font-size: 13px; font-weight: 600; color: #30036d; display: block; margin-bottom: 1px; } -ul.list-video li a span.video-info span.author{ +.list-video li a span.video-info .author{ font-size: 11px; display: block; margin-bottom: 1px; } -ul.list-video li a span.video-info span.time-lenght{ +.list-video li a .video-info .time-lenght{ font-size: 12px; font-weight: 600; display: block; } -ul.list-video li a span.video-info span.time-lenght span{ +.list-video li a .video-info .time-lenght span{ color: #de2500; } -ul.list-video li a span.number{ +.list-video li a .number{ color: #FFF; font-size: 10px; text-align: center; @@ -535,13 +545,13 @@ top: 54px; left: 78px; } -ul.list-video li a span.subtitle{ +.list-video li a .subtitle{ margin-bottom: 2px; display: block; color: #de2500; font-size: 11px; } -ul.list-video li span.duration{ +.list-video li .duration{ color: #7628df; font-size: 12px; font-weight: 600; diff -r 12978893bbf0 -r 523828fb7c78 integration/css/home.css --- a/integration/css/home.css Wed Oct 24 15:38:36 2012 +0200 +++ b/integration/css/home.css Wed Oct 24 16:30:55 2012 +0200 @@ -1,31 +1,31 @@ /* header */ -div.header div.title-header{ +.header .title-header{ width: 460px; float: left; height: 60px; } -div.header div.title-header h2{ +.header .title-header h2{ width: 100%; text-align: center; line-height: 60px; } -div.header div.title-header h2 a{ +.header .title-header h2 a{ color: #de2500; font-size: 24px; text-decoration: underline; font-weight: bold; } -div.header div.title-header h2 a:hover{ +.header .title-header h2 a:hover{ text-decoration: none; } /* content */ -div.content div.left-content, -div.content div.right-content{ +.content .left-content, +.content .right-content{ padding-top: 8px; float: left; } -div.content div.left-content h2, -div.content div.right-content h2{ +.content .left-content h2, +.content .right-content h2{ padding: 6px 0; margin-bottom: 14px; border-bottom: 1px solid #333333; @@ -34,88 +34,122 @@ font-weight: 600; } /* left-content */ -div.content div.left-content{ +.content .left-content{ width: 630px; margin-right: 20px; } -div.left-content div.hashcut-video-wrap{ +.left-content .hashcut-video-wrap{ padding-left: 10px; overflow: hidden; margin-bottom: 16px; } -div.hashcut-video-wrap div.news{ +.hashcut-video-wrap .news{ width: 300px; float: left; margin-right: 20px; } -div.hashcut-video-wrap div.news:nth-child(2n+2){ +.hashcut-video-wrap .news:nth-child(2n+2){ margin-right: 0; } -div.hashcut-video-wrap h3{ +.hashcut-video-wrap h3{ font-size: 12px; } -div.hashcut-video-wrap h3 strong{ +.hashcut-video-wrap h3 strong{ font-weight: 600; } -div.hashcut-video-wrap div.last h3 strong{ +.hashcut-video-wrap .last h3 strong{ margin-bottom: 2px; font-weight: 600; display: block; } -div.left-content div.hashcut-video-wrap h3 a{ +.left-content .hashcut-video-wrap h3 a{ border-bottom: 1px solid #bababa; display: inline-block; line-height: 12px; } -div.left-content div.hashcut-video-wrap h3 a:hover{ +.left-content .hashcut-video-wrap h3 a:hover{ border-bottom: none; } -div.hashcut-video-wrap h3 span{ +iv.hashcut-video-wrap h3 span{ color: #de2500; } -div.hashcut-video-wrap a.screenshot{ +.hashcut-video-wrap a.screenshot{ display: inline-block; margin-bottom: 8px; } -div.hashcut-video-wrap div.last:nth-child(4n+4){ +.hashcut-video-wrap .last:nth-child(4n+4){ margin-right: 0; } -div.hashcut-video-wrap div.last{ +.hashcut-video-wrap .last{ width: 140px; float: left; margin: 0 20px 12px 0; } -div.left-content div.pagination{ +.left-content .pagination{ text-align: center; } -div.left-content div.pagination a{ +.left-content .pagination a{ font-size: 14px; color: #7628df; text-decoration: underline; } -div.left-content div.pagination a:hover{ +.left-content .pagination a:hover{ text-decoration: none; } -div.left-content div.pagination a.active{ +.left-content .pagination a.active{ color: #de2500; text-decoration: none; } /* right-content */ -div.content div.right-content{ +.content .right-content{ width: 310px; } -div.right-content div.definition p{ +.right-content .definition p{ font-size: 12px; line-height: 14px; margin-bottom: 12px; } -div.right-content div.definition p strong{ +.right-content .definition p strong{ font-weight: bold; } -div.right-content div.definition p a{ +.right-content .definition p a{ color: #7628df; text-decoration: underline; } -div.right-content div.definition p a:hover{ +.right-content .definition p a:hover{ text-decoration: none; +} +.how-to ul li{ + background-image: url(../img/how-to-sprite.png); + background-repeat: no-repeat; + margin-bottom: 2px; +} +.how-to ul li h3{ + color: #de2500; + font-size: 18px; + font-weight: bold; + margin-bottom: 12px; +} +.how-to ul li p{ + font-size: 12px; +} +.how-to ul li.inscription{ + height: 84px; + background-position: 212px 0; +} +.how-to ul li.creation{ + height: 100px; + background-position: 212px -128px; +} +.how-to ul li.creation{ + height: 100px; + background-position: 212px -128px; +} +.how-to ul li.publier{ + height: 90px; + background-position: 212px -266px; +} +.how-to ul li.next-step{ + height: 24px; + background-position: 212px -377px; } \ No newline at end of file diff -r 12978893bbf0 -r 523828fb7c78 integration/home.html --- a/integration/home.html Wed Oct 24 15:38:36 2012 +0200 +++ b/integration/home.html Wed Oct 24 16:30:55 2012 +0200 @@ -163,7 +163,23 @@

Un Hashcut est un assemblage de citations de vidéos, mises bout à bout, sans altération des médias d’origine, et permet à chacun de proposer un nouveau regard, une porte d’entrée éditorialisée sur ces médias.

- +

Comment faire ?

+