/** * Primary Drupal Styles * Author: Bachir Soussi Chiadmi */ body { font-size: 16px; font-family: "aileron", Arial, "MS Trebuchet", sans-serif; } h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.4em; } h4 { font-size: 1.3em; } h5 { font-size: 1.2em; } h6 { font-size: 1.1em; } input { font-family: Arial, "MS Trebuchet", sans-serif; font-size: 0.8em; } /** layout */ .footer-block .region, .header-block { display: inline-block; vertical-align: top; } #header, #main, #footer { padding: 0; } #container { width: 1024px; margin: 0 auto; } #header h1 a { display: block; height: 335px; background-image: url(../../images/logo.png); background-size: contain; background-position: center; background-repeat: no-repeat; text-indent: -2000px; overflow: hidden; margin: 0; } #header h2 { text-align: center; color: #20c498; } #node-63 { padding: 1em 0; } #node-63 .content section { display: inline; } #node-63 .content p { margin: 0; } #node-63 ul.links { text-align: right; margin: 0; padding: 0; } #node-63 ul.links li { margin: 0; padding: 0; display: inline-block; } #node-63 ul.links a { color: inherit; text-decoration: none; font-weight: 500; } #thematique-anchor-links { padding: 1em 0; } #thematique-anchor-links ul { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; padding: 0; margin: 0; } #thematique-anchor-links ul li { max-width: 7em; list-style: none; padding: 0; margin: 0; } #thematique-anchor-links ul li a { text-decoration: none; font-weight: 600; display: block; min-height: 3em; background-position: center; background-repeat: no-repeat; background-size: contain; } #thematique-anchor-links ul li a span { display: block; } #thematique-anchor-links ul li a.en_attente { color: #ddd; } #thematique-anchor-links ul li a.node-32 { background-image: url(../../images/fond-theme-lite-0.jpg); color: #2f82ff; } #thematique-anchor-links ul li a.node-14 { background-image: url(../../images/fond-theme-lite-1.jpg); color: #ff0000; } #thematique-anchor-links ul li a.node-38 { background-image: url(../../images/fond-theme-lite-2.jpg); color: #88aa00; } #thematique-anchor-links ul li a.node-3 { background-image: url(../../images/fond-theme-lite-3.jpg); color: #ff6600; } #thematique-anchor-links ul li a.node-20 { background-image: url(../../images/fond-theme-lite-4.jpg); color: #ff2ad4; } #thematique-anchor-links ul li a.node-26 { background-image: url(../../images/fond-theme-lite-5.jpg); color: #8800aa; } html, body, #container, #main, #main > .region, #block-system-main, #block-system-main > .content, .node-thematique { overflow-x: visible; } .node-thematique { min-height: 766px; position: relative; } .node-thematique::before { position: absolute; content: " "; width: 110%; height: 110%; top: -5%; left: -5%; z-index: -1; background-position: center; background-size: contain; background-repeat: no-repeat; } .node-thematique.node-32::before { background-image: url(../../images/fond-theme-0.jpg); } .node-thematique.node-32 > h2, .node-thematique.node-32 .group-video .field-name-field-description h3, .node-thematique.node-32 .group-description .field-name-field-ecouter, .node-thematique.node-32 .node-documentair .field-name-field-doc, .node-thematique.node-32 .node-episode .field-name-title-field { color: #2f82ff; } .node-thematique.node-14::before { background-image: url(../../images/fond-theme-1.jpg); } .node-thematique.node-14 > h2, .node-thematique.node-14 .group-video .field-name-field-description h3, .node-thematique.node-14 .group-description .field-name-field-ecouter, .node-thematique.node-14 .node-documentair .field-name-field-doc, .node-thematique.node-14 .node-episode .field-name-title-field { color: #ff0000; } .node-thematique.node-38::before { background-image: url(../../images/fond-theme-2.jpg); } .node-thematique.node-38 > h2, .node-thematique.node-38 .group-video .field-name-field-description h3, .node-thematique.node-38 .group-description .field-name-field-ecouter, .node-thematique.node-38 .node-documentair .field-name-field-doc, .node-thematique.node-38 .node-episode .field-name-title-field { color: #88aa00; } .node-thematique.node-3::before { background-image: url(../../images/fond-theme-3.jpg); } .node-thematique.node-3 > h2, .node-thematique.node-3 .group-video .field-name-field-description h3, .node-thematique.node-3 .group-description .field-name-field-ecouter, .node-thematique.node-3 .node-documentair .field-name-field-doc, .node-thematique.node-3 .node-episode .field-name-title-field { color: #ff6600; } .node-thematique.node-20::before { background-image: url(../../images/fond-theme-4.jpg); } .node-thematique.node-20 > h2, .node-thematique.node-20 .group-video .field-name-field-description h3, .node-thematique.node-20 .group-description .field-name-field-ecouter, .node-thematique.node-20 .node-documentair .field-name-field-doc, .node-thematique.node-20 .node-episode .field-name-title-field { color: #ff2ad4; } .node-thematique.node-26::before { background-image: url(../../images/fond-theme-5.jpg); } .node-thematique.node-26 > h2, .node-thematique.node-26 .group-video .field-name-field-description h3, .node-thematique.node-26 .group-description .field-name-field-ecouter, .node-thematique.node-26 .node-documentair .field-name-field-doc, .node-thematique.node-26 .node-episode .field-name-title-field { color: #8800aa; } .node-thematique > h2 { font-size: 3em; font-weight: 400; padding-left: 0.18em; } .node-thematique .content { letter-spacing: -0.25em; } .node-thematique .content .field-name-field-emvideo img { width: 100%; } .node-thematique .content > * { letter-spacing: normal; } .node-thematique .content article.main { display: inline-block; vertical-align: top; width: 69.5%; overflow: hidden; } .node-thematique .content article.main .field-name-body { position: relative; z-index: 3; } .node-thematique .content article.main .field-name-body > * { padding: 0 1em 0 0.2em; } .node-thematique .content article.main .field-name-body .summary { position: relative; height: 5.75em; overflow: hidden; background-color: #fff; transition: background-color 0.5 ease-in-out; } .node-thematique .content article.main .field-name-body .summary p { font-size: 1.1em; padding: 0.5em; font-weight: 500; } .node-thematique .content article.main .field-name-body .value { position: absolute; height: 1px; margin-bottom: 0; transition: height 0.5s ease-in-out; background-color: #fff; overflow: hidden; } .node-thematique .content article.main .field-name-body .value p { font-size: 1em; padding: 0.5em; } .node-thematique .content article.main .field-name-body:hover .summary { background-color: #fff; } .node-thematique .content article.main .field-name-body:hover .value { height: 700px; } .node-thematique .content article.main .field-name-body p { padding: 0 0 1em; margin: 0; } .node-thematique .content article.main .group-video { position: relative; } .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; } .node-thematique .content article.main .group-video .group-description .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; } .node-thematique .content article.main .group-video .group-description .field-name-field-description { opacity: 0; 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; } .node-thematique .content aside.right { display: inline-block; vertical-align: top; width: 30.5%; } .node-thematique .content aside.right .field-name-field-eclairages { padding-left: 1em; } .node-thematique .content aside.right .node-documentair { padding-bottom: 1em; } .node-thematique .content aside.right .node-documentair .content { position: relative; } .node-thematique .content aside.right .node-documentair .content .group-txt { cursor: pointer; pointer-events: none; box-sizing: border-box; position: absolute; z-index: 2; overflow: hidden; top: 0; left: 0; width: 90%; max-height: 80%; margin: 5%; padding: 5%; background-color: rgba(255, 255, 255, 0.9); } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { font-size: 1em; font-weight: 500; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field { font-size: 2em; font-weight: 600; height: 1px; overflow: hidden; transition: height 0.3s ease-in-out; } .node-thematique .content aside.right .node-documentair .content:hover .group-txt .field-name-title-field { height: 70%; } .node-thematique .content aside.bottom { padding-top: 1em; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { display: block; width: 19%; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { position: relative; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { cursor: pointer; pointer-events: none; box-sizing: border-box; position: absolute; z-index: 2; overflow: hidden; top: 0; left: 0; width: 90%; height: 80%; margin: 5%; padding: 5%; background-color: rgba(255, 255, 255, 0.3); opacity: 0.8; 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-style: italic; text-align: center; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content:hover .group-txt { opacity: 1; background-color: rgba(255, 255, 255, 0.9); } #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe { width: 100%; height: 100%; } .page-title { font-size: 3em; font-weight: 400; text-transform: capitalize; } #block-menu-menu-footer-menu { padding: 2em 0; } #block-menu-menu-footer-menu ul { margin: 0; padding: 0; text-align: center; } #block-menu-menu-footer-menu li { display: inline-block; list-style: none; } #block-menu-menu-footer-menu a { text-decoration: none; color: inherit; } .region-footer-bottom { text-align: center; } .region-footer-bottom .block { display: inline-block; font-size: 0.7em; margin: 2em 0; } #content { padding: 1em; } /** Messages. */ div.messages { padding: 9px; margin: 0.5em 0 0; color: #036; background: #bdf; border: 1px solid #ace; border-radius: 5px; } div.warning { color: #840; background: #fe6; border-color: #ed5; } div.error { color: #fff; background: #e63; border-color: #d52; } div.error p.error { color: #333; } div.status { color: #360; background: #cf8; border-color: #be7; } /** Tab navigation */ ul.primary, .views-admin-links ul { font: 13px/1.231 sans-serif; *font-size: small; border-collapse: collapse; padding: 0 0 0 1em; /* LTR */ white-space: nowrap; list-style: none; margin: 5px; height: auto; line-height: normal; } ul.primary li, .views-admin-links li { display: inline; } ul.primary li a, .views-admin-links li a { border-width: 1px; border-style: solid solid none solid; height: auto; margin-right: 0.5em; /* LTR */ padding: 0 1em; text-decoration: none; border-top-left-radius: 5px; border-top-right-radius: 5px; } /** Form */ #node-form .form-region-main { border-right: 1px solid #BFBFBF; padding-right: 10px; width: 68%; } #node-form .form-region-main label { float: left; min-width: 25%; } #node-form .form-region-main input.form-text { width: 40%; } #node-form .form-region-right { padding-left: 5px; } #node-form .form-region-right label { float: left; min-width: 35%; } #node-form .form-region-right input.form-text { width: 60%; } #node-form .form-region-main label.option, #node-form .form-region-right label.option { float: none; } form:not(#views-ui-config-item-form) .form-item { position: relative; /* padding:9px;*/ } form:not(#views-ui-config-item-form) .form-item .description { position: absolute; bottom: 140%; /* right:-15px;*/ z-index: 5; left: 50%; color: #1A1A1A; line-height: 1.1; background: url(../images/popup.png) 50% 100% no-repeat; width: 240px; margin: 0px 0px -15px; padding: 9px 10px 20px; display: none; border-top: 1px solid #9F9F9F; } form:not(#views-ui-config-item-form) .form-item:hover { z-index: 1; height: auto; /* Fix for flicker in IE7 */ } form:not(#views-ui-config-item-form) .form-item:hover > .description { display: block; } fieldset { border: 1px solid #D4D4D4; padding: 10px; margin-bottom: 1em; border-radius: 5px; } fieldset legend { font-size: 1.6em; } input.form-text { max-width: 95%; } /** TABLE */ table { width: 100%; border-radius: 5px; } table thead th { background-color: #CCC; padding: 0.5em 1em; text-align: left; } table tbody tr.even, table tbody tr.odd { border-bottom: 0 solid #CCCCCC; padding: 0.1em 0.6em; } table tbody tr.even { background-color: #EEE; } table tbody tr.odd { background-color: #E5E5E5; } table tbody td { padding: 0.5em 1em; text-align: left; } td.active { background-color: transparent; } #tasks .tabs { border: none; padding: 0; } #tasks .tabs a { border: none; border-radius: 3px; background-color: #eee; padding: 0.4em; color: #000; margin: 0 1em 0 0; } #tasks .tabs a.active { background-color: #999; }