From 383d754831a03a67492e962b7bef48b27907d3e7 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 27 Feb 2017 17:38:59 +0100 Subject: [PATCH] imporved css --- .../clameurs/css/dist/styles.css | 64 +++++++-------- .../figureslibres/clameurs/css/styles.scss | 78 +++++++++---------- 2 files changed, 67 insertions(+), 75 deletions(-) diff --git a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css index 40a76d47..a8463bec 100755 --- a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css +++ b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css @@ -160,16 +160,6 @@ input { background-image: url(../../images/menu-fond-theme-5-flat-nb.jpg); cursor: default; } -html, -body, -#container, -#main, -#main > .region, -#block-system-main, -#block-system-main > .content, -.node-thematique { - overflow-x: visible; } - .node-thematique { min-height: 766px; margin-bottom: 10em; @@ -364,35 +354,37 @@ body, .node-thematique .content article.main .group-video .group-description { cursor: pointer; pointer-events: none; - box-sizing: border-box; position: absolute; z-index: 2; top: 0; left: 0; - width: 90%; - height: 80%; - margin: 5%; - padding: 5%; - background-color: rgba(255, 255, 255, 0); - transition: background-color 0.3s ease-in-out; } + width: 100%; + height: 100%; } .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { font-size: 1em; - font-weight: 500; + font-weight: 600; + padding: 0.2em 0.4em; background-color: rgba(255, 255, 255, 0.9); - transition: background-color 0.3s ease-in-out; - display: inline-block; } + display: inline-block; + margin: 15px; } .node-thematique .content article.main .group-video .group-description .field-name-field-description { + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + width: 80%; + height: 70%; + margin: 10%; + padding: 5%; opacity: 0; + background-color: rgba(255, 255, 255, 0.9); transition: opacity 0.3s ease-in-out; } .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 { font-weight: 500; - font-size: 2em; } - .node-thematique .content article.main .group-video:hover .group-description { - background-color: rgba(255, 255, 255, 0.9); } - .node-thematique .content article.main .group-video:hover .group-description .field-name-field-ecouter { - background-color: rgba(255, 255, 255, 0); } - .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { - opacity: 1; } + font-size: 2em; + margin: 0; } + .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { + opacity: 1; } .node-thematique .content aside.right { display: inline-block; vertical-align: top; @@ -419,12 +411,12 @@ body, height: 80%; margin: 5%; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { + font-size: 1em; + font-weight: 600; + padding: 0.2em 0.4em; + background-color: rgba(255, 255, 255, 0.9); display: inline-block; z-index: 5; - font-size: 1em; - font-weight: 500; - padding: 7px; - background-color: rgba(255, 255, 255, 0.9); transition: background-color 0.3s ease-in-out; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field { position: absolute; @@ -460,11 +452,11 @@ body, .node-thematique .content aside.bottom { padding-top: 0.6em; } .node-thematique .content aside.bottom .field-name-field-episodes .field-label { - font-size: 1.3em; - font-weight: 400; - background-color: #fff; + font-size: 1em; + font-weight: 600; + padding: 0.2em 0.4em; + background-color: rgba(255, 255, 255, 0.9); display: inline-block; - padding: 0.2em 0.4em 0; margin-bottom: 0.3em; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { display: -ms-flexbox; @@ -497,7 +489,7 @@ body, transition: opacity,background-color 0.3s ease-in-out; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { font-size: 4em; - font-weight: 700; + font-weight: 800; font-style: italic; text-align: center; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { diff --git a/sites/all/themes/figureslibres/clameurs/css/styles.scss b/sites/all/themes/figureslibres/clameurs/css/styles.scss index df58af90..61f3394a 100755 --- a/sites/all/themes/figureslibres/clameurs/css/styles.scss +++ b/sites/all/themes/figureslibres/clameurs/css/styles.scss @@ -196,20 +196,26 @@ $header_height:400px; } } +// +// html, +// body, +// #container, +// #main, +// #main>.region, +// #block-system-main, +// #block-system-main>.content, +// .node-thematique{ +// overflow-x: visible; +// } -html, -body, -#container, -#main, -#main>.region, -#block-system-main, -#block-system-main>.content, -.node-thematique{ - overflow-x: visible; +@mixin vidlabel(){ + font-size: 1em; + font-weight: 600; + padding:0.2em 0.4em; + background-color: rgba(255,255,255,0.9); + display: inline-block; } - - // thematique .node-thematique{ min-height:766px; @@ -359,35 +365,37 @@ body, .field-name-field-emvideo a{ display: block; line-height: 0;} .group-description{ cursor: pointer; pointer-events: none; - box-sizing: border-box; position:absolute; z-index: 2; top:0; left: 0; - width:90%; - height:80%; - margin:5%; - padding:5%; - background-color: rgba(255,255,255,0); - transition: background-color 0.3s ease-in-out; + width:100%; height:100%; + .field-name-field-ecouter{ - font-size: 1em; - font-weight: 500; - background-color: rgba(255,255,255,0.9); - transition: background-color 0.3s ease-in-out; - display: inline-block; + @include vidlabel(); + + margin:15px; + // transition: background-color 0.3s ease-in-out; } .field-name-field-description{ + position: absolute; + top:0; left:0; + box-sizing: border-box; + width:80%; + height:70%; + margin:10%; + padding:5%; opacity: 0; + background-color: rgba(255,255,255,0.9); transition: opacity 0.3s ease-in-out; h3{ - font-weight: 500; font-size: 2em + font-weight: 500; font-size: 2em; margin:0; } } } &:hover .group-description{ - background-color: rgba(255,255,255,0.9); - .field-name-field-ecouter{ - background-color: rgba(255,255,255,0); - } + // background-color: rgba(255,255,255,0.9); + // .field-name-field-ecouter{ + // background-color: rgba(255,255,255,0); + // } .field-name-field-description{opacity:1;} } } @@ -421,12 +429,8 @@ body, margin:5%; // opacity: 0; .field-name-field-doc{ - display: inline-block; + @include vidlabel; z-index:5; - font-size: 1em; - font-weight: 500; - padding: 7px; - background-color: rgba(255, 255, 255, 0.9); transition:background-color 0.3s ease-in-out; } .field-name-title-field{ @@ -474,11 +478,7 @@ body, // letter-spacing: -0.25em; .field-label{ - font-size: 1.3em; - font-weight: 400; - background-color: #fff; - display: inline-block; - padding:0.2em 0.4em 0; + @include vidlabel; margin-bottom: 0.3em; } &>.field-items{ @@ -507,7 +507,7 @@ body, transition:opacity,background-color 0.3s ease-in-out; .field-name-title-field{ font-size: 4em; - font-weight: 700; + font-weight: 800; font-style: italic; text-align: center; }