// @Author: Bachir Soussi Chiadmi <bach>
// @Date: 18-12-2017
// @Email: bachir@figureslibres.io
// @Filename: app.scss
// @Last modified by: bach
// @Last modified time: 20-12-2017
// @License: GPL-V3
@import 'base/reset';
@import 'base/colors';
@import 'base/grid';
@import 'base/layout';
@import 'base/fonts';
@mixin spining-loader-square{
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
animation: rotation 2s infinite linear;
}
@mixin entree-micro-square {
white-space: nowrap;
font-size: 0.5em;
line-height: 0;
letter-spacing: 0px;
span{
display:inline-block;
$s:6px;
width:$s; height:$s;
background-color: black;
margin-right: 2px;
&[tid='134']{background-color: var(--e-col-134);}
&[tid='121']{background-color: var(--e-col-121);}
&[tid='125']{background-color: var(--e-col-125);}
&[tid='119']{background-color: var(--e-col-119);}
&[tid='132']{background-color: var(--e-col-132);}
&[tid='122']{background-color: var(--e-col-122);}
&[tid='129']{background-color: var(--e-col-129);}
&[tid='120']{background-color: var(--e-col-120);}
&[tid='130']{background-color: var(--e-col-130);}
&[tid='118']{background-color: var(--e-col-118);}
&[tid='127']{background-color: var(--e-col-127);}
&[tid='133']{background-color: var(--e-col-133);}
&[tid='128']{background-color: var(--e-col-128);}
&[tid='124']{background-color: var(--e-col-124);}
&[tid='116']{background-color: var(--e-col-116);}
&[tid='117']{background-color: var(--e-col-117);}
&[tid='131']{background-color: var(--e-col-131);}
&[tid='126']{background-color: var(--e-col-126);}
&[tid='123']{background-color: var(--e-col-123);}
}
}
@mixin btn {
padding: 3px;
background-color: white;
border-radius: 3px;
}
// .layout-container{
// pointer-events: none;
// }
body.expo-black{
background-color: $expo-black;
}
// _ _
// | |_ ___ __ _ __| |___ _ _
// | ' \/ -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
pointer-events: all;
// TODO: what header height to fit well with player ??
> .wrapper > .region-header > .block{
// outline: 1px solid orange;
}
#audio-player {
// outline: 1px solid red;
}
}
#block-edlptheme-branding{
display: inline-block;
h1{
margin:0; display: inline-block;
a.site-name{
display: block;
$w:260px;
width:$w; height:$w * 0.22;
margin-top: 0.15em;
background-image: url(../img/logo.svg);
// background-color: white;
background-repeat:no-repeat;
background-size: contain;
white-space: nowrap;
text-indent: 500px;
overflow: hidden;
html.is-mobile &{
$w:170px;
width:$w; height:$w * 0.22;
}
}
}
opacity: 1;
transition: opacity 0.7s ease-in-out;
.audio-player-visible &{
opacity: 0;
}
}
#block-mainnavigation, #block-mainnavigation-2{
float:right;
margin-top: 25px;
z-index: 21;
position: relative;
>h2{
display: none;
}
ul{
margin:0; padding: 0;
white-space: nowrap;
li{
margin:0; padding:0;
display: inline-block;
a{
font-size: 0.756em;
color:inherit;
text-decoration: none;
text-transform: uppercase;
margin-left: 1em;
@include btn;
&:before{
content: "";
display:inline-block;
$sq:0.6em;
width: $sq; height:$sq;
border: 1px solid red;
margin-right: 0.3em;
}
&.ajax-loading:before{
@include spining-loader-square;
}
&.is-active:before,
&.is-active-trail:before,
&:hover:before{
// border-color: red;
background-color: red;
}
}
}
}
@media only screen and (max-width: 1270px) {
margin-top: 15px;
ul{
li{
display: block;
a{
@include content_petit;
}
}
li:first-of-type{
display:none;
}
}
}
html.is-mobile &{
// outline: 1px solid blue;
margin-top:4px;
width:50px; //height:25px;
overflow: visible;
$square-size:15px;
>h2#block-mainnavigation-menu.visually-hidden,
>h2{
// outline: 1px solid green;
display:block;
right:0;
clip: auto;
margin:0;
text-indent: 100px;
overflow: hidden;
cursor: pointer;
width:$square-size*2; height:$square-size*2;
background-size:$square-size $square-size;
background-color: white;
background-repeat: repeat;
background-image:
// hiddings off-square lines
linear-gradient(90deg, white 0, white 2px, transparent 2px, transparent),
linear-gradient(90deg, transparent 0, transparent $square-size - 2, white $square-size - 2, white),
linear-gradient(0deg, white 0, white 2px, transparent 2px, transparent),
linear-gradient(0deg, transparent 0, transparent $square-size - 2, white $square-size - 2, white),
// drawing the lines
linear-gradient(90deg, transparent 0, transparent 2px, red 2px, transparent 3px, transparent),
linear-gradient(90deg, transparent 0, transparent $square-size - 3, red $square-size - 3, transparent $square-size - 2, transparent),
linear-gradient(0deg, transparent 0, transparent 2px, red 2px, transparent 3px, transparent),
linear-gradient(0deg, transparent 0, transparent $square-size - 3, red $square-size - 3, transparent $square-size - 2, transparent);
}
ul.menu{
// outline: 1px solid orange;
border-top: 1px solid red;
border-bottom: 1px solid red;
position:absolute;
background-color: white;
width:300px;
padding: 1em;
top:$square-size * 3; left:100px;
transition: left 0.2s ease-in-out;
li{
&:first-of-type{
display:block;
}
a{
font-size: 0.680em;
padding:0; margin:0;
}
}
}
&.opened ul.menu{
left:-130px;
}
}
}
.block-language{
float: right;
margin-top: 24px;
margin-left: 2em;
ul{
margin:0; padding:0;
li{
display: inline-block; vertical-align: middle;
list-style: none;
a{
font-size: 0.690em;
color:inherit;
text-decoration: none;
text-transform: capitalize;
margin-left: 0.8em;
@include btn;
&:before{
content: "";
display:inline-block;
$sq:0.6em;
width: $sq; height:$sq;
border: 1px solid red;
margin-right: 0.3em;
}
}
&.is-active,
&:hover{
a:before{
border-color: red;
background-color: red;
}
}
}
}
@media only screen and (max-width: 1270px) {
margin-top: 15px;
margin-left: 0.5em;
border-left: 1px solid red;
ul{
li{
display: block;
a{
@include content_petit;
}
}
}
}
}
// ___
// / __|__ _ _ ___ ____ _ ___
// | (__/ _` | ' \ V / _` (_-<
// \___\__,_|_||_\_/\__,_/__/
#corpus-map{
opacity: 0;
body[corpus="map-ready"] &{
transition: opacity 2s ease-out;
opacity: 1;
}
}
// _
// _ __ __ _(_)_ _
// | ' \/ _` | | ' \
// |_|_|_\__,_|_|_||_|
// booting sequence
// and ajax loading effects
main[role="main"]{
.row{
html.js &{opacity: 0;}
.col{
opacity:1;
transition: opacity 0.5s ease-in-out;
}
}
body[booted="booted"] &{
.row{
transition: opacity 1s ease-out;
opacity:1;
}
}
body.ajax-loading &{
.row .col:not([theme="edlp_search_search_form"]){
opacity:0.2;
}
// &:before{
// content:"";
// display: block;
// position: absolute;
// z-index: 10;
// $s:60px;
// width:$s; height:$s;
// top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
// // padding:1em;
// background-color: rgba(255,255,255, 0.5);
// background-image: url(../img/edlp-loader-anim.svg);
// background-size: 50%;
// background-repeat: no-repeat;
// background-position: center;
// // border-radius: $s/2;
// }
}
html.is-mobile &{
*{pointer-events: all!important;}
}
}
main[role="main"]{
.layout-content{
pointer-events: none;
.row{
pointer-events: none;
height:100%;
overflow: hidden;
.col{
pointer-events: none;
height: 100%;
position: relative;
&>.wrapper{
pointer-events:all;
position: relative;
box-sizing: border-box;
border-top: 1px solid red;
border-bottom: 1px solid red;
background-color: $transparent-bg;
padding:0 0 1em;
max-height: 100%;
overflow-y: auto;
&>*{
padding:0 1.5em;
}
// .os-scroll{
// box-sizing: border-box;
// max-height: 100%;
// padding:0 1em;
// }
}
}
}
}
h3.sur-title{
@include content_titles;
margin:0.9em 0 0;
}
article.node:not(.node--type-enregistrement)>h2, h2.title{
@include content_titles;
}
article.node.node--type-enregistrement{
margin:0.5em 0;
>h2{
@include document_titles_teaser;
}
}
article.node.node--type-enregistrement.node--view-mode-transcript,
article.node.node--type-enregistrement.node--view-mode-article{
>h2{
// display: none;
@include content_subtitles;
margin:1em 0 0.9em 0;
}
h3.sur-title{
display: none;
}
}
article.node.node--type-enregistrement.node--view-mode-index,
article.node.node--type-enregistrement.node--view-mode-docsindex{
&{margin:0}
h2.node-title{margin-top: 0.6em; line-height: 1;}
p{margin:0.1em 0;}
}
article.node.node--type-enregistrement.node--view-mode-transcript{
html.js &{
h3.sur-title{display:none;}
}
.field--name-field-transcript-vo, .field--name-field-transcript-trad{
.field__label{
@include content_titles;
html.js &{
display: none;
}
}
&:not(.visible){
display:none;
}
}
nav{
padding:1em 0 0;
div.field__label{
@include content_titles;
display: inline-block;
cursor:pointer;
margin-right: 1em;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid red;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before{
background-color: red;
}
}
}
}
article.node--type-page.node--view-mode-default{
>h2.node-title{
@include content_big_titles;
margin:0.3em 0;
}
.field--name-field-visuel{
margin-bottom: 1em;
}
}
.agenda{
.past-events{
border-top: 1px solid red;
margin-top: 1em;
}
text-align: center;
h3{
@include content_titles;
}
article.node > h2.node-title{
@include content_subtitles;
margin-bottom: 0;
}
.field--name-field-date{
time{
@include content_courant;
}
}
}
article.node--type-evenement{
.field--name-field-page-liee{
@include content_subtitles;
}
.field--name-field-date{
@include content_courant;
}
.field--name-title{
@include content_courant;
}
// .field--name-body{}
}
article.node--type-evenement.node--view-mode-aside{
.field--name-field-date{
@include content_subtitles;
}
}
div.taxonomy-term{
padding-top:1em!important;
&:not(.home_mobile)>h2{
display:none;
// @include content_subtitles;
// margin: 1em 0 0.5em;
}
&.home_mobile h2{
margin:0;
@include content_titles;
}
>.content{
}
&:not(.home_mobile) .field__label{
display:none;
// @include content_titles;
}
.field--name-field-notice{
.field__label{
margin-bottom: 1em;
}
}
&.home_mobile .field__label{
margin: 0;
@include content_subtitles;
}
article.node--type-enregistrement{
h2.node-title{
@include content_subtitles;
margin:0.9em 0 0 0;
}
}
}
div.articles{
padding-top:1em!important;
&:not(.home_mobile)>h3{
display:none;
// @include content_subtitles;
// margin: 1em 0 0.5em;
}
&.home_mobile h2{
margin:0;
@include content_titles;
}
article.node--type-enregistrement{
h2.node-title{
@include content_subtitles;
margin:0.9em 0 0 0;
}
}
}
div.lastdocs,
div.docsindex{
article.node--type-enregistrement{
h2.node-title{
@include content_subtitles;
margin:0.9em 0 0 0;
// margin:0 0 0.3em 0;
}
.entrees{
@include entree-micro-square;
}
}
&.docsindex{
article.node--type-enregistrement{
section.contents{
// display: grid;
// grid-template-columns: 1fr 1fr;
// grid-template-rows: 1fr 1fr;
h2.node-title{
// grid-column: 1;
// grid-row: 1;
display: inline-block;
}
.entrees{
// grid-column: 2;
// grid-row: 1;
display: inline-block;
margin-left: 1em;
}
.description{
// grid-column: span 2;
// grid-row: 2;
}
}
}
}
}
// chutier actions on documents
div.docsindex,
div.taxonomy-term.vocabulary-entrees{
article.node--type-enregistrement{
display: grid;
grid-template-columns: 1em 1fr;
grid-column-gap: 0.3em;
section.actions{
grid-column: 1;
padding:0.5em 0;
box-sizing: border-box;
a[action="add"],
.chutier-icon.not-logedin{
opacity:0;
transition: opacity 0.3s ease-in-out;
}
}
section.contents{
grid-column: 2;
}
&:hover{
section.actions{
a[action="add"],
.chutier-icon.not-logedin{
opacity:1;
transition: opacity 0.2s ease-in-out;
}
}
}
}
}
div.lastdocs-home{
>.wrapper{
padding:0 1em!important;
}
h3{
@include content_titles;
}
article.node--type-enregistrement{
h2.node-title{
// @include content_subtitles;
// margin:0.9em 0 0 0;
margin:0 0 0.3em 0;
}
.entrees{
@include entree-micro-square;
}
}
nav{
text-align: center;
a{
font-size: 0.756em;
}
}
}
div.lastdocs{
h3{
@include content_titles;
}
article.node--type-enregistrement{
.entrees{
@include entree-micro-square;
}
h2.node-title{
@include content_subtitles;
margin:0.3em 0 0 0;
// margin:0 0 0.3em 0;
}
.description{
p{
margin:0 0 0.3em 0;
}
}
}
}
.collection{
h3{
@include content_titles;
text-align: center;
padding-top: 0.5em;
}
}
html.is-mobile & .col[sys_path="collection"]{
h3{
@include content_titles;
text-align: center;
padding-top: 0.5em;
}
article.node--type-enregistrement{
margin:0.7em 0 0 0;
h2.node-title{
margin: 0;
}
div.entrees{
@include entree-micro-square;
}
p{margin: 0;}
}
}
div.taxonomy-term.vocabulary-entrees.home_mobile{
// &:not(:first-of-type){
padding-bottom: 1em;
// border-bottom: 1px solid red;
// }
> h2{
white-space:nowrap;
&:before{
content: "";
display:inline-block;
$sq:10px;
width: $sq; height:$sq;
border: 1px solid #000;
margin-right: 0.5em;
}
div{display: inline-block;}
}
&[tid='134']{>h2:before{border-color: var(--e-col-134);}}
&[tid='121']{>h2:before{border-color: var(--e-col-121);}}
&[tid='125']{>h2:before{border-color: var(--e-col-125);}}
&[tid='119']{>h2:before{border-color: var(--e-col-119);}}
&[tid='132']{>h2:before{border-color: var(--e-col-132);}}
&[tid='122']{>h2:before{border-color: var(--e-col-122);}}
&[tid='129']{>h2:before{border-color: var(--e-col-129);}}
&[tid='120']{>h2:before{border-color: var(--e-col-120);}}
&[tid='130']{>h2:before{border-color: var(--e-col-130);}}
&[tid='118']{>h2:before{border-color: var(--e-col-118);}}
&[tid='127']{>h2:before{border-color: var(--e-col-127);}}
&[tid='133']{>h2:before{border-color: var(--e-col-133);}}
&[tid='128']{>h2:before{border-color: var(--e-col-128);}}
&[tid='124']{>h2:before{border-color: var(--e-col-124);}}
&[tid='116']{>h2:before{border-color: var(--e-col-116);}}
&[tid='117']{>h2:before{border-color: var(--e-col-117);}}
&[tid='131']{>h2:before{border-color: var(--e-col-131);}}
&[tid='126']{>h2:before{border-color: var(--e-col-126);}}
&[tid='123']{>h2:before{border-color: var(--e-col-123);}}
.field--name-field-notice, .index{
>.field__label{
cursor: pointer;
}
.field__item, .item-list{
height: auto;
transition: height 0.3s ease-in-out;
}
&.closed{
.field__item, .item-list{
overflow: hidden;
height:1px;
transition: height 0.01s ease-in-out;
}
}
}
&.notice-opened, &.index-opened{
.field--name-description{
overflow: hidden;
height: 1px;
}
}
}
h4.inter-titre{
@include content_courant;
font-weight: normal;
font-style: italic;
margin:1.5em 0 0.5em 0;
}
article.node p, div.taxonomy-term p{
@include content_courant;
margin:0 0 1em 0;
}
.field.text-formatted{
a{
border-bottom: 1px dotted #1A1A1A;
&.audio-link{
border-color: red;
}
}
}
.productions-subtree{
a{
@include nav_link;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid black;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before{
background-color: black;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
}
.productions-parent{
margin-top: 1em;
margin-bottom: 0.5em;
a{
@include nav_link;
&:before{
content:'\2039';
// font-weight: bold;
font-size: 1.7em;
line-height: 0.95;
margin-right:0.1em;
margin-left: -0.4em;
display: inline-block;
vertical-align:bottom;
}
}
}
img{
max-width: 100%;
height: auto;
}
ul, li, ul.inline li:first-child{
margin:0; padding:0;
list-style: none;
}
span.close-col-btn{
// z-index: 10;
pointer-events: all;
cursor: pointer;
position:sticky;
top:0.5em;
padding:0!important;
margin:0.7em 0 0 0.5em;
display: block;
$s:10px;
width:$s; height:$s;
float: left;
background-image: url(../img/close.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
html.is-mobile & .node--type-enregistrement.node--view-mode-full{
h2.node-title{
@include content_titles;
}
.audiofield label{display: none;}
}
}
// _ _ _ ___ _
// /_\ _ _ __| (_)___| _ \ |__ _ _ _ ___ _ _
// / _ \ || / _` | / _ \ _/ / _` | || / -_) '_|
// /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
// |__/
@mixin audio_controls {
// outline: 1px dotted orange;
&>*{
display: inline-block;
vertical-align: middle;
width:20px;height:30px;
background-position: center;
background-size: contain;
}
.play-pause{
background-image: url(../img/audio-player-play.svg);
padding:0 0.3em;
cursor: pointer;
}
&.is-playing{
.play-pause{background-image: url(../img/audio-player-pause.svg);}
}
.previous, .next{
opacity: 0.3;
transition: opacity 0.3s ease-in-out;
cursor: auto;
&.is-active{
opacity: 1;
cursor: pointer;
}
}
.previous{
background-image: url(../img/audio-player-previous.svg);
}
.next{
background-image: url(../img/audio-player-next.svg);
}
}
#audio-player{
// outline: 1px solid blue;
position: absolute;
box-sizing: border-box;
// overflow: hidden;
top:0; left:0;
padding-left:0.7em;
// background-color: white;
height:100%;
min-width:700px;
width: calc(100% - 460px);
// width: calc(100% - 950px);
@media only screen and (max-width: 1270px) {
width: calc(100% - 180px);
}
z-index: 20;
opacity: 0;
pointer-events: none;
transition: opacity 0.7s ease-in-out;
&.visible{
opacity: 1;
pointer-events:all;
}
white-space: nowrap;
&>*{
display: inline-block;
vertical-align: middle;
// word-break:keep-all;
padding:0;
max-height: 100%;
white-space: normal;
@include btn;
background-color: transparent;
}
.btns{
@include audio_controls;
}
.time-line-container{
// height:50%;
background:transparent;
.time-line{
position: relative;
width:70px; height:1px;
background-color: #000;
overflow: visible;
transform: rotateZ(-46deg);
// outline: 3px solid blue;
.loader{
width:0; height:1px;
background-color: red;
border-top: 2px solid white;
border-bottom: 2px solid white;
position: absolute;
top:-2px;left:0;
cursor: pointer;
}
.cursor{
height:10px;width:0;
border-left: 2px solid red;
position:absolute;
left:0; top:-5px;
pointer-events: none;
}
}
}
.time{
&>*{
width:70px;
text-align: right;
}
.current-time{
font-size: 1.4em;
font-weight: 600;
}
.duration{
font-size: 0.75em;
font-weight: 400;
}
}
.favoris{
height:100%;
}
.cartel{
// outline: 1px solid green;
vertical-align: top;
position: relative;
margin-top: 0.5em;
margin-left: 1em;
// min-width: 200px;
width: calc(100% - 260px);
// background-color: white;
opacity: 1;
transition: opacity 0.5s ease-in-out;
&.loading{opacity: 0;}
white-space: nowrap;
.actions, .cartels{
display: inline-block;
vertical-align: top;
white-space: normal;
position: relative;
}
.actions{
width:1.5em;
margin-top: 0.1em;
}
.cartels{
width:calc(100% - 1.5em);
// outline: 1px solid green;
.first-cartel{
// visibility: hidden;
opacity:1;
transition: opacity 0.2s ease-in-out;
.entrees{
// body:not(.domain-expo-encyclopediedelaparole-org) &{
@include entree-micro-square;
// }
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
font-weight: 600;
}
p{
margin:0;
font-size: 0.882em;
}
}
.second-cartel{
position: absolute;
top: 0; left:0;
// background-color: white;
height:100%; min-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
white-space: nowrap;
&>*{
display: inline-block;
vertical-align: top;
white-space: normal;
}
.col-left{
// position: relative;
a.ajax-link{
display: block;
font-size: 0.82em;
font-weight: 600;
}
.addtoany_list {
// outline: 1px solid blue;
// margin-top: -1em;
// top: -1em;
& > a:first-child{
padding-left: 0;
margin-left:-4px;
}
}
}
.col-right{
border-left:1px solid #1A1A1A;
margin-left:5px; padding-left:5px;
max-width: calc(100% - 100px);
h3{
// display: inline;
// float: left;
@include content_subtitles;
margin:0;
}
div.item-list{
// float: left;
// display: inline;
max-width: 100%;
}
ul{
// display: inline;
max-width: 100%;
padding:0; margin:0;
li{
padding:0; margin:0;
display: inline-block;
list-style: none;
&:not(:last-of-type){
margin-right:0.4em;
&:after{
content:","
}
}
a{
@include content_courant;
}
}
}
}
}
}
&:hover, &.second-visible{
.first-cartel{
opacity: 0;
}
.second-cartel{
opacity: 1;
}
}
// article:not(.has-second-cartel){
// .second-cartel{
// display:none;
// }
// }
}
// ___
// | __|_ ___ __ ___
// | _|\ \ / '_ \/ _ \
// |___/_\_\ .__/\___/
// |_|
body.domain-expo-encyclopediedelaparole-org &{
position: absolute;
box-sizing: content-box;
width:550px; height:100px;
left: 50vw; top:50vh;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255, 0.8);
outline: 1px solid red;
padding:0.5em 0.5em 0 0.5em; margin:0;
.btns,
.actions,
.favoris{
display: none;
}
.time-line-container{
margin:0.80em 0 0;
}
.time{
margin:1.055em 0 0;
>*{
width:50px;
}
.current-time{
font-size: 1em;
}
.duration{
margin-top:0.28em;
}
}
.cartel{
margin-top: 0;
width:calc(100% - 190px);
.entrees{
span.entree{
}
}
}
* {
background-color: transparent;
}
$w:60px; // diagonal length
$s:($w *1.4)*0.5; // side given the diagonal (1.4 is the square root of 2)
&:before{
content:"";
position: absolute;
width: $w; height:0;
border-top: 1px solid red;
}
// pos attributes refers to where the popup appears
&[pos="bottom-right"]{
transform: translateY($s) translateX($s);
&:before{
top:-1px;
left: -$w - 1px;
transform-origin: bottom right;
transform: rotateZ(45deg);
}
}
&[pos="bottom-left"]{
transform: translateX(-100%) translateY($s) translateX(-$s);
&:before{
// top:calc(100% + 1px);*
top:0;
left: 100%;
transform-origin: top left;
transform: rotateZ(-45deg);
}
}
&[pos="top-left"]{
transform: translateY(-100%) translateX(-100%) translateY(-$s) translateX(-$s);
&:before{
bottom:0;
left: 100%;
transform-origin: top left;
transform: rotateZ(45deg);
}
}
&[pos="top-right"]{
transform: translateY(-100%) translateY(-$s) translateX($s);
&:before{
top:calc(100% + 1px);
left: - ($w +1px);
transform-origin: top right;
transform: rotateZ(-45deg);
}
}
}
body.expo-black &{
background-color: $expo-black-bg;
color:#fff;
.time-line-container .time-line .loader{
border-top: 2px solid $expo-black-bg;
border-bottom: 2px solid $expo-black-bg;
}
}
}
// ___ _ _ _
// / __| |_ _ _ __| (_)___
// \__ \ _| || / _` | / _ \
// |___/\__|\_,_\__,_|_\___/
.chutier-icon{
$s:1em;
z-index: 1;
display: block;
position: relative;
width:$s;height:$s;
overflow: hidden;
text-indent: 50em;
// background-color: red;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../img/favori-off.svg);
&[action="remove"]{
background-image: url(../img/favori-on.svg);
}
transition: opacity 0.2s ease-in-out;
&.ajax-loading{
opacity: 0.2;
}
&.not-logedin{
overflow: visible;
}
.popup{
display:none;
position: absolute;
top:0; left:0;
width:300px; height:auto; min-height: 100px;
.inner{
background-color: rgba(255,255,255,0.9);
border: 1px solid red;
text-indent: 0;
padding: 0.5em;
margin:$s*1.2 0 0 $s*1.2;
p{
font-size: 0.756em;
margin:0;
&:not(:last-of-type){
margin: 0 0 0.4em 0;
}
}
}
}
&:hover{
.popup{
display: block;
}
}
}
.row .col .studio-ui-wrapper{
height: 100%;
}
#studio-ui{
height:100%;
@mixin draggable_sortable_field__item {
display: inline-block;
position: relative;
white-space: nowrap;
pointer-events: none;
// margin-right: 25px;
width:25px;
height: 100%;
&.ui-draggable-dragging{
height:100px;
}
opacity: 1;
transition: opacity 0.1s ease-in-out;
&.ready-to-remove{
opacity:0.3;
cursor:crosshair;
}
&>*{
pointer-events: all;
}
article{
// outline: 1px dotted purple;
position: absolute;
bottom:0;
transform-origin: left top;
transform: rotateZ(-45deg);
h2{
margin:0;
text-transform: none;
a{
white-space: nowrap!important;
&:before{
content:"";
display: inline-block;
vertical-align: middle;
width:$compo_square_size; height:$compo_square_size;
border: 1px solid white;
background-color: white;
// TODO: entries color;
}
font-size: 0.756em;
}
}
}
.handler{
z-index: 99;
cursor: grab;
position: absolute;
bottom:0; left:1px;
display: block;
width:$compo_square_size; height:$compo_square_size;
transform-origin: left top;
transform: rotateZ(-45deg);
border: 1px solid red;
background-color: white;
// TODO: entries color;
}
&.is-active .handler{
background-color: red;
}
} // end mixin
.chutier_ui{
height: 65%;
border-bottom: 1px solid red;
position: relative;
&>h2{
z-index: 10;
position: absolute;
width: calc(100% - 20px);
margin: 0;
padding:0.5em 0;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
// outline: 1px solid orange;
background-color: white;
}
.documents{
padding-top: 35px;
height:calc(100% - 35px);
overflow-y: auto;
overflow-x: hidden;
// box-sizing: content-box;
// outline: 1px solid green;
ul,li{
margin:0; padding:0;
line-height: 1.2;
}
ul{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
}
li{
// grid-auto-flow: row;
// display: inline-block; vertical-align: top;
// width:32%;
margin-bottom: 0.3em;
white-space: nowrap;
>div{
display:inline-block;
padding-right: 2em;
&.ui-draggable{
cursor:grab;
}
}
.chutier-icon{
display: inline-block;
width:0.7em; height:0.7em;
margin-right: 0.3em;
opacity: 0.8;
&.on-compo{
background-image: url(../img/favori-oncompo.svg);
}
}
a.audio-link{
// text-transform: capitalize;
font-size: 0.756em;
margin-right: 0.5em;
white-space: normal;
}
.entrees{
display:inline-block;
@include entree-micro-square;
}
}
}
}
$compo_square_size:12px;
.composition_ui{
height:35%;
&>h2{
z-index: 10;
position: absolute;
width: calc(100% - 20px);
margin: 0;
padding:0.5em 0;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
// outline: 1px solid orange;
background-color: white;
}
>.wrapper{
padding-top: 35px;
height:calc(100% - 35px);
overflow: hidden;
white-space: nowrap;
section.compositions-list, section.composer{
display: inline-block; vertical-align: bottom;
height: 100%;
}
.compositions-list{
width:30%;
height:100%; // this is not working
overflow-y: auto;
box-sizing: border-box;
padding-right: 0.5em;
border-right: 1px solid #aaa;
li{
opacity: 1;
transition: opacity 0.3s ease-in-out;
&:hover{
a.delete-composition-link{
opacity: 1;
}
}
&.ajax-loading{
opacity: 0.4;
}
}
a{
font-size: 0.756em;
$w:7px;
$s:7px; $m:5px;
&.composition-link{
display: inline-block;
box-sizing: border-box;
// width:100%;
width: calc(100% - #{$w +$s +$m +2});
&:before{
content: "";
width:$w; height:$w;
border: 1px solid black;
background-color: white;
display: inline-block;
vertical-align: middle;
margin-right: $m;
}
&.ajax-loading:before{
@include spining-loader-square;
}
&.is-active:before{
background-color: black;
}
}
&.delete-composition-link{
display: inline-block;
vertical-align: middle;
$s:7px; width:$s; height:$s;
margin-left: $m;
text-indent: 300px; overflow: hidden;
background-image: url('../img/delete.svg');
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
&.new-composition-link{
// padding-left: 1em;
&:before{
content:"+";
// font-weight: bold;
margin-right: $m;
}
display: inline-block;
vertical-align: top;
overflow: hidden;
margin-top: 0.4em;
height:1em;
transition: height 0.2s ease-in-out;
&.folded{
height:0;
}
}
}
.new-compo-form{
input[type="text"]{
font-size: 0.756em;
padding:0 0.5em;
width:calc(100% - 50px);
height:1.7em;
border: none;
border-top:1px dotted red;
border-bottom:1px dotted red;
}
button{
background: none;
border: none;
font-size: 1em;
line-height: 1;
font-weight: bold;
}
opacity: 1;
transition: opacity 0.2s ease-in-out;
&.ajax-loading{
opacity: 0.4;
}
}
}
.composer{
position: relative;
box-sizing: border-box;
padding-left: 0.5em;
width:69%;
$header_height:25px;
$actions_height:25px;
$padding:5px;
opacity:1;
transition: opacity 0.3s ease-in-out;
&.ajax-loading{
opacity:0.3;
}
>*{
box-sizing: border-box;
}
>header{
height:$header_height;
padding-bottom:$padding;
font-size: 0.756em;
}
>.composition{
position: relative;
height:calc(100% - #{$header_height + $actions_height + $padding*2});
// outline: 1px solid red;
padding-bottom: 1em;
.field--name-documents{
position: relative;
box-sizing: border-box;
height: 100%;
width: 100%; padding:0 0.5em;
$h:29px; $w:calc(100% - 2px); $c:#A1A1A1;
&:before, &:after{
content: "";
width:$w;
position: absolute;
bottom:0; left:0;
// z-index: -1;
}
&:before{
border-top: 1px solid $c;
height:$h /2;
}
&:after{
border-left: 1px solid $c;
border-right: 1px solid $c;
height:$h;
}
.field__item{
@include draggable_sortable_field__item;
}
}
.remove-drop-zone{
position: absolute;
top:0; left:0; width:100%; height:15%;
z-index: 150;
border-radius: 5px;
border: 1px dotted rgb(193, 193, 193);
background-image: url('../img/trash.svg');
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
&.ui-droppable-hover{
background-color: rgb(241, 240, 240);
// background-color: red;
}
}
}
>.actions{
padding-top:$padding;
height:$actions_height;
// outline: 1px solid blue;
.compo-player-controls{
@include audio_controls;
}
}
}
}
}
// drag and drop specifics
// created by js
.field__item.ui-draggable-dragging{
// outline: 1px solid green;
@include draggable_sortable_field__item;
}
}
// ___ _
// / __| ___ __ _ _ _ __| |_
// \__ \/ -_) _` | '_/ _| ' \
// |___/\___\__,_|_| \__|_||_|
.col[theme="edlp_search_search_form"]{
&, >.wrapper{
position: relative;
height:100%;
}
}
#edlp-search-form{
height:100%;
.fieldgroup{
border-bottom: 1px solid red;
margin-top:1em;
margin-bottom: 0em;
legend{
font-size: 0.9em;
margin: 0;
font-weight: 500;
}
.fieldset-wrapper{
padding-bottom: 1em;
}
.form-item{
margin:0;
}
}
input[type="text"], input[type="search"]{
font-size: 0.8em;
padding:0.2em; margin:0;
border: 1px solid #aaa;
border-radius: 3px;
width:90%;
}
#edit-entries--wrapper{
legend{
cursor: pointer;
display: block;
width:100%;
&:after{
content: '\2304';
font-size: 2em;
font-weight: 200;
display:inline-block;
line-height: 0;
letter-spacing: 0;
// width:15px;
height:13px;
overflow: hidden;
// text-align: center;
// outline: 1px solid orange;
float: right;
margin-top: 0.5em 0 0 0;
}
}
#edit-entries{
overflow: hidden;
height:1px;
margin:0;
transition: height 0.4s ease-in-out;
}
&.opened{
legend:after{
// content: '\2303';
transform: rotateZ(180deg);
transform-origin: center;
margin-top: 0 0 0.5em 0;
}
#edit-entries{
height:362px;
}
}
}
#edit-entries{
.form-item{
label, input{
display: inline-block;
vertical-align: middle;
}
label{
font-size: 0.756em;
}
input[type="checkbox"]{
appearance:none;
$w:10px;
width:$w; height:$w;
border: 1px double black;
background-color: white;
&:checked{
background-color: black;
}
&[value='134']{
border-color: var(--e-col-134);
&:checked{background-color: var(--e-col-134);}
}
&[value='121']{
border-color: var(--e-col-121);
&:checked{background-color: var(--e-col-121);}
}
&[value='125']{
border-color: var(--e-col-125);
&:checked{background-color: var(--e-col-125);}
}
&[value='119']{
border-color: var(--e-col-119);
&:checked{background-color: var(--e-col-119);}
}
&[value='132']{
border-color: var(--e-col-132);
&:checked{background-color: var(--e-col-132);}
}
&[value='122']{
border-color: var(--e-col-122);
&:checked{background-color: var(--e-col-122);}
}
&[value='129']{
border-color: var(--e-col-129);
&:checked{background-color: var(--e-col-129);}
}
&[value='120']{
border-color: var(--e-col-120);
&:checked{background-color: var(--e-col-120);}
}
&[value='130']{
border-color: var(--e-col-130);
&:checked{background-color: var(--e-col-130);}
}
&[value='118']{
border-color: var(--e-col-118);
&:checked{background-color: var(--e-col-118);}
}
&[value='127']{
border-color: var(--e-col-127);
&:checked{background-color: var(--e-col-127);}
}
&[value='133']{
border-color: var(--e-col-133);
&:checked{background-color: var(--e-col-133);}
}
&[value='128']{
border-color: var(--e-col-128);
&:checked{background-color: var(--e-col-128);}
}
&[value='124']{
border-color: var(--e-col-124);
&:checked{background-color: var(--e-col-124);}
}
&[value='116']{
border-color: var(--e-col-116);
&:checked{background-color: var(--e-col-116);}
}
&[value='117']{
border-color: var(--e-col-117);
&:checked{background-color: var(--e-col-117);}
}
&[value='131']{
border-color: var(--e-col-131);
&:checked{background-color: var(--e-col-131);}
}
&[value='126']{
border-color: var(--e-col-126);
&:checked{background-color: var(--e-col-126);}
}
&[value='123']{
border-color: var(--e-col-123);
&:checked{background-color: var(--e-col-123);}
}
}
}
}
input[type="submit"]{
font-size: 0.756em;
padding:0.1em;
margin:1em 0 0 0;
float:right;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
&.ajax-loading input[type="submit"]{
opacity:0.2;
pointer-events: none;
}
}
.col[theme="edlp_search_results"]{
opacity: 1;
transition: opacity 0.3s ease-in-out;
&.ajax-loading{
opacity:0.2;
}
article.node{
&:first-of-type{
margin-top: 1em!important;
}
.entrees{
@include entree-micro-square;
}
h2.node-title{
margin:0 0 0.3em 0;
// font-size: 0.8em;
// font-weight: 500;
// text-transform: none;
}
// .description{
// p{
// margin:0;
// font-size: 0.75em;
// }
// }
}
}
// _ _ _ _ _
// /_\ (_)__ ___ __ | \| |___ __| |___
// / _ \ | / _` \ \ / | .` / _ \/ _` / -_)
// /_/ \_\/ \__,_/_\_\ |_|\_\___/\__,_\___|
// |__/
// body.path-edlp-node main{
// main .col>.wrapper, .edlp-ajax-node{
// height: 100%;
// }
// }
// _ _
// /_\ __ _ ___ _ _ __| |__ _
// / _ \/ _` / -_) ' \/ _` / _` |
// /_/ \_\__, \___|_||_\__,_\__,_|
// |___/
body.path-agenda main .col{
&>.wrapper{
height:100%;
}
}
.agenda{
// position: relative;
// white-space: nowrap;
// height: 100%;
// >*{
// white-space: normal;
// }
// div.column{
// display: inline-block;
// vertical-align: top;
// height:100%;
// }
// div.next-event{
// width:65%;
// }
// div.future-past-events{
// width:33%;
// }
ul,li{
margin:0; padding:0;
list-style: none;
}
nav{
a{
font-size: 0.756em;
}
}
}
// _ _
// | || |___ _ __ ___
// | __ / _ \ ' \/ -_)
// |_||_\___/_|_|_\___|
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
body.path-frontpage, body.path-productions{
.layout-content .row{
// opacity: 1;
white-space: normal;
min-height: 100%;
.grid{
position: relative;
min-height: 100%; max-height: 100%;
}
.col{
height:auto;
opacity:1;
transition: opacity 0.5s ease-in-out;
// box-sizing: content-box;
&.offfield{
opacity: 0;
transition: opacity 0s ease-in-out;
}
&.col-2:last-child{
padding-left: 0em;
padding-right: 1em;
}
>.wrapper{
margin-bottom: 1em;
padding:0;
>*{padding:0;}
article.node{
.field--name-field-visuel{
// a,img{
// display: block;
// width: 100%;
// height:auto;
// }
// http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
// maintain box size without waiting for image loading
a{
display: block;
width: 100%;
padding-bottom: 56.25%; // ratio 800*450;
// height:auto;
}
img{
// display: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
}
header{
background-color: rgba(255,255,255,0.95);
box-sizing: border-box;
width: 100%;
padding:0.5em 1em;
h2.node-title{
margin:0;
@include content_titles;
}
// p{margin: 0;}
}
&.node--view-mode-image-2-columns{
header{
position: absolute;
bottom: 0; left:0;
h2.node-title{
@include content_big_titles;
}
}
}
&.node--view-mode-image-1-columns{
.field--name-field-visuel{
padding-bottom: 35px;
}
header{
box-sizing: border-box;
position: absolute;
bottom: 0; left:0;
}
}
&.node--view-mode-text-1-column{
// box-sizing: border-box;
padding:0 1em;
}
}
}
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|
// |_|\___/\___/\__\___|_|
@mixin oblique-list {
display: inline-block;
position: relative;
list-style: none;
margin: 0 1.5em 0 0;
// width:2em; height:10em;
padding: 0;
a{
position: absolute;
bottom: 0;
transform-origin: left bottom;
transform: rotateZ(-45deg);
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 0.756em;
white-space: nowrap;
}
}
footer{
position: relative;
pointer-events: none;
// outline: 1px dotted blue;
>.wrapper{
white-space: nowrap;
// height:100%;
>.region{
// height:100%;
// display: table-cell;
display: inline-block;
vertical-align: baseline;
white-space:normal;
// pointer-events: none;
// outline: 1px dotted purple;
// position: relative;
>*{
display: inline-block; vertical-align: bottom;
}
}
.region-footer-left{
// float:left;
width:12%;
// min-width:50px;
text-align: left;
}
.region-footer-center{
// float: none;
width: 73%;
overflow:hidden;
text-align: center;
// z-index: 2;
}
.region-footer-right{
// float:right;
min-width:12%;
// min-width: 50px;
text-align: right;
// position: absolute;
// bottom:0; right:0;
// z-index: 1;
}
@media only screen and (max-width: 1270px) {
.region-footer-left{
width:9%;
}
.region-footer-center{
width: 80%;
overflow:hidden;
// text-align: left; // why ??
text-align: center;
}
.region-footer-right{
box-sizing: content-box;
min-width:5%;
}
}
}
#block-footer{
display: inline-block;
margin-bottom: 1em;
ul{
margin:0;
padding:0;
// white-space: nowrap;
li{
pointer-events: all;
// @include oblique-list;
display: inline-block;
padding:0;
// &:first-of-type{
// margin-left: 1em;
// }
white-space:nowrap;
a{
font-size: 0.756em;
@include btn;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid black;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before{
background-color: black;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
}
}
@media only screen and (max-width: 1270px) {
margin-top: 15px;
ul{
li{
display: block;
margin-left: 0!important;
padding:0;
line-height: 0.6;
a{
@include content_petit;
padding:0;
}
}
}
}
}
// remove #block-productions from selector
// to enable again oblique style for all block-menu
nav#block-productions.block-menu{
display: inline-block;
ul{
margin:0;
padding:0;
li{
pointer-events: all;
@include oblique-list;
&:first-of-type{
margin-left: 1em;
}
a{
@include btn;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid black;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before{
background-color: black;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
}
}
}
nav#block-productions.block-menu{
position: relative;
pointer-events: none;
display:none;
body.path-productions &, body.entity-type-node.bundle-page & {display:inline-block;}
ul{
margin-left: -3em;
white-space: nowrap;
li{
height:200px; // this is needed to respect the height of oblique links :(
a{
// outline: 1px solid blue;
pointer-events: all;
// @include btn;
background-color: rgba(255,255,255, 0.6);
padding-right: 0.4em;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid red;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before,
&.is-active-trail:before{
background-color: red;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
}
}
}
.block-block-edlp-entrees{
pointer-events: none;
body.path-productions &,
body.entity-type-node.bundle-page &,
body.path-agenda & {display:none}
display: inline-block;
// vertical-align: top;
// outline: 1px dotted green;
div.item-list{
ul{
margin:0;
white-space: nowrap;
li{
@include oblique-list;
margin:0;
white-space: nowrap;
pointer-events: none;
// docsindex
&:first-of-type{
margin-right: 3.4em;
}
// articles
&:last-of-type:not(.entree){
margin-right: 5em;
}
span.oblique-wrapper{
height:120px; // this is needed to respect the height of oblique links :(
display: inline-block;
vertical-align: bottom;
position: relative;
width:1.5em;
}
a.term-link, a.docsindex-link, a.articles-link{
// outline: 1px solid blue;
pointer-events: all;
// background-color: #fff;
background-color: rgba(255,255,255, 0.6);
// @include btn;
padding-right: 0.4em;
color:black;
transition: color 0.3s ease-in-out;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid #000;
background-color: #000;
margin-right: 0.5em;
transition: background-color 0.1s ease-in-out;
}
&.docsindex-link,
&.articles-link{
text-transform: capitalize;
&.ajax-loading:before{
@include spining-loader-square;
}
}
&.articles-link{
margin-left: 4em;
}
}
.entree-content{
display: inline-block;
// outline: 1px solid green;
width:0;
overflow: hidden;
opacity: 0;
transition: all 300ms ease-in-out;
transition-property: width,opacity;
span.oblique-wrapper:first-of-type{
margin-left: 0.5em;
}
span.oblique-wrapper a{
text-transform: none;
pointer-events: auto;
&:before{
content: "";
display:inline-block;
$sq:5px;
width: $sq; height:$sq;
border: 1px solid #000;
margin-right: 0.5em;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
.term-description{
display: inline-block;
margin-left: 1.5em;
text-align: left;
width:250px;
word-wrap:break-word;
// word-break:break-all;
hyphens: auto;
white-space: normal;
background-color: $transparent-bg;
padding:0.5em;
padding-bottom:0;
p{
font-size: 0.65em;
margin:0;
}
}
}
// TODO: replace variable system by attribute color
// a.term-link:before, .entree-content span.oblique-wrapper a:before{
// border-color: attr(color);
// background-color: attr(color);
// }
&[tid='134']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-134);background-color: var(--e-col-134);}}
&[tid='121']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-121);background-color: var(--e-col-121);}}
&[tid='125']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-125);background-color: var(--e-col-125);}}
&[tid='119']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-119);background-color: var(--e-col-119);}}
&[tid='132']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-132);background-color: var(--e-col-132);}}
&[tid='122']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-122);background-color: var(--e-col-122);}}
&[tid='129']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-129);background-color: var(--e-col-129);}}
&[tid='120']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-120);background-color: var(--e-col-120);}}
&[tid='130']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-130);background-color: var(--e-col-130);}}
&[tid='118']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-118);background-color: var(--e-col-118);}}
&[tid='127']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-127);background-color: var(--e-col-127);}}
&[tid='133']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-133);background-color: var(--e-col-133);}}
&[tid='128']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-128);background-color: var(--e-col-128);}}
&[tid='124']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-124);background-color: var(--e-col-124);}}
&[tid='116']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-116);background-color: var(--e-col-116);}}
&[tid='117']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-117);background-color: var(--e-col-117);}}
&[tid='131']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-131);background-color: var(--e-col-131);}}
&[tid='126']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-126);background-color: var(--e-col-126);}}
&[tid='123']{
a.term-link:before, .entree-content span.oblique-wrapper a:before{
border-color: var(--e-col-123);background-color: var(--e-col-123);}}
// &.highlighted{
// a.term_link{
// color: red;
// }
// }
.entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
a.docsindex-link:not(:hover):not(.is-active):before,
a.articles-link:not(:hover):not(.is-active):before{
background-color: #fff!important;
}
&:not(.opened):not(.highlighted){
a.term-link:not(:hover):before{
background-color: #fff!important;
}
}
&.opened{
// outline: 1px solid purple;
a.term-link:after {
content: '';
position: absolute;
left: 15px; right:0;
bottom: -3px;
border-bottom: 1px solid grey;
}
.entree-content{
width:350px;
opacity: 1;
}
}
// &:not(:first-of-type) .entree-content{display: none;}
}
}
&.opened, &.highlighted{
li:not(.opened):not(.highlighted):not(:hover){
a.term-link{
color:#a1a1a1;
}
}
}
}
}
body.domain-expo-encyclopediedelaparole-org &{
.block-block-edlp-entrees{
display: none;
}
}
$icons_w:20px;
$mobile_icon_w:15px;
@mixin iconlinkblock($bgimgurl, $bgimgurlactive) {
pointer-events: all;
margin-left: 0.5em;
position: relative;
// @include btn;
a{
box-sizing: border-box;
display: block;
$wh:$icons_w;
width:$wh; height:$wh;
text-indent: $wh*2;
margin: 0;
overflow: hidden;
// mask-image: $bgimgurl;
// mask-size: contain;
// background-color: #000;
// transition: background-color 0.3s ease-in-out;
background-image: $bgimgurl;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
&:hover, &.is-active{
// background-color: red;
background-image: $bgimgurlactive;
}
&[alt]:hover{
// position:relative;
&:after{
content:attr(alt);
position:absolute;
right:0; bottom:$icons_w*1.2;
width:170px;
border: 1px solid red;
padding:0.5em;
font-size: 0.756em;
background-color: white;
z-index: 50;
}
}
html.is-mobile &{
$wh:$mobile_icon_w;
width:$wh; height:$wh;
text-indent: $wh*2;
}
}
}
.block.random-player{
margin-bottom: 1em;
@include iconlinkblock(url(../img/random.svg), url(../img/random-active.svg));
}
#block-studiolinkblock{
margin-bottom: 1em;
margin-left: 0.2em;
@include iconlinkblock(url(../img/studio.svg), url(../img/studio-active.svg));
body.user-logged-in &{
a{
background-image: url(../img/studio-active.svg);
}
}
}
#block-userlogin,
#block-studiouserlogin{
margin-bottom: 1em;
pointer-events: all;
margin-left: 0.2em;
$wh:$icons_w;
position: relative;
// box-sizing: border-box;
width:$wh; height: $wh;
h2{
box-sizing: content-box;
// @include btn;
// padding:0;
position: relative;
width:$wh; height:$wh;
background-image: url(../img/studio.svg);
// background-color: red;
background-size: contain;
text-indent: $wh*2;
margin: 0;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.block-content{
z-index: 0;
position:absolute;
right:0;bottom:$wh;
padding:0.5em;
padding-bottom: 20px;
background-color: $transparent-bg;
border-top: 1px solid red;
border-bottom: 1px solid red;
overflow: hidden;
box-sizing:border-box;
height: 0px;
opacity:0;
pointer-events:none;
transition: all 0.5s ease-in-out;
transition-property: height,opacity;
transition-delay: 2s;
// &:hover{
// height:200px;
// opacity:1;
// pointer-events: auto;
// }
span.studio-description{
font-size: 0.75em;
text-align: justify;
}
form{
font-size: 0.75em;
}
.item-list{
ul{margin:0;}
li{
margin:0;
list-style: none;
a{
color: inherit;
text-decoration: none;
font-size: 0.75em;
white-space:nowrap;
}
}
}
}
&:hover{
.block-content{
height:300px;
opacity: 1;
pointer-events:auto;
transition-delay: 0s;
}
}
// &#block-studiouserlogin:hover{
// .block-content{
// height:300px;
// }
// }
#user-login-form{
transition: opacity 1s ease-out;
opacity:1;
&.ajax-loading{
opacity: 0.2;
}
}
}
#block-edlpsearchlinkblock{
margin-bottom: 1em;
@include iconlinkblock(url(../img/search.svg), url(../img/search-active.svg));
margin-left: 0.2em;
}
.block-language{
float: none;
margin-top: 0;
margin-right: 2em;
ul{
margin:0; padding:0;
li{
display: inline-block; vertical-align: middle;
list-style: none;
pointer-events: all;
a{
font-size: 0.690em;
color:inherit;
text-decoration: none;
text-transform: capitalize;
margin-left: 0.8em;
@include btn;
&:before{
content: "";
display:inline-block;
$sq:0.6em;
width: $sq; height:$sq;
border: 1px solid red;
margin-right: 0.3em;
}
}
&.is-active,
&:hover{
a:before{
border-color: red;
background-color: red;
}
}
}
}
html.is-mobile &{
// outline: 1px solid green;
border-left: none;
ul{
margin-right:0.5em;
}
li{
line-height: 0;
a{
padding:0;
margin:0;
// &:before{display: none;}
&.is-active{
display:none;
}
}
}
}
}
html.is-mobile &{
position: fixed;
box-sizing: border-box;
bottom:0; left:0;
width:100%;
background-color: #fff;
padding-top:0;
padding-bottom:0;
.region-footer-left, .region-footer-right{
width: 50%;
>*{
margin:0.4em 0!important;
}
}
#block-footer, .block-language{
// margin-top: 0;
li{
display: inline-block;
a{
font-size: 0.680em;
&:before{
$sq:5px;
width: $sq; height:$sq;
}
}
}
}
.region-footer-right{
text-align: right;
}
}
}
// _ _ _ ___
// | \| |___ __| |___ | _ \___ _ __ _ _ _ __
// | .` / _ \/ _` / -_) | _/ _ \ '_ \ || | '_ \
// |_|\_\___/\__,_\___| |_| \___/ .__/\_,_| .__/
// |_| |_|
.node-popup{
.inner{
position: relative;
.entrees{
@include entree-micro-square;
}
.title{
margin:0.2em 0 0;
// margin:0.3em 0;
font-size: 0.9em;
font-weight: 600;
}
.description{
p{
margin:0;
font-size: 0.756em;
}
}
.chutier-icon{
&[action="add"]{
display:none;
}
position:absolute;
top:0.4em; right:0.4em;
}
}
}
// __ ___ _ ___ _ _ _
// \ \ / (_)__| |___ ___| __(_) | |_ ___ _ _
// \ V /| / _` / -_) _ \ _|| | | _/ -_) '_|
// \_/ |_\__,_\___\___/_| |_|_|\__\___|_|
// complete rewrite of url_to_video_filter css
.url-to-video-container{
// display:block;
margin:10px auto;
// width:100%;
&.no-js{
border:solid black 1px;
.loader{
// background:url(../images/no-js.png) no-repeat center center;
// background-size:40px 40px;
}
.url-to-video-player{
cursor:auto;
}
}
.loader{
// top:240px;
// left:50%;
// transform:translate(-50%, -50%);
// background:#FFF url(../images/ajax-loader.gif) no-repeat center center;
top:auto; left: auto;
transform: none;
}
span.url-to-video-player{
// display:block;
// width:100%;
/* assuming that the video has a 16:9 ratio */
// padding-bottom:56.25%;
padding-bottom:0;
// overflow:hidden;
// position:relative;
// width:100%;
// height:100%;
height:auto;
// cursor:hand;
// cursor:pointer;
// display: block;
&:before{
content: "";
display: block;
/* assuming that the video has a 16:9 ratio */
padding-top: 56.25%;
}
img.player-thumb
{
// background-position:center center;
// background-size:cover;
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// cursor:pointer;
}
.play-button
{
z-index: 5;
// height:40px;
// width:40px;
// display:block;
// background:url(../images/play-button.png) no-repeat center center;
// background-size:40px 40px;
// position:absolute;
// top:240px;
top:50%;
// left:50%;
// transform:translate(-50%, -50%);
// cursor:pointer;
}
iframe.player-iframe
{
// width:100%;
// height:100%;
// position:absolute;
// top:0;
// left:0;
}
}
}
#user-register-form{
width:29em;
input{
@include content_courant;
}
label{
@include content_subtitles;
display: inline-block;
width: 16em;
white-space: normal;
}
.form-item{
white-space: nowrap;
}
.description{
@include content_petit;
max-width: 100%;
white-space: normal;
}
input[type='email'], input[type='password']{
width:17em;
}
.password-strength, .password-strength__meter{
width:98%;
}
.password-strength__title, .password-confirm{
@include content_courant;
}
}
#better-messages-default.better-messages-overlay{
border-radius: 0;
padding:0.8em;
box-shadow: 0 2px 10px #716f6f;
.better-messages-content{
}
.better-messages-footer{
border-top: none;
.better-messages-close{
@include content_courant;
span{
height:15px; width:15px;
background-size: contain;
}
}
}
}