all interface is now responsive

This commit is contained in:
2021-12-07 17:10:59 +01:00
parent 62a9afcc33
commit c634eb80f3
7 changed files with 477 additions and 190 deletions
@@ -458,6 +458,7 @@ body {
width: 100%;
height: 100%;
/* background-color: red;*/
overflow-y: hidden;
}
#container {
width: 100%;
@@ -517,7 +518,7 @@ html.oldie #header #header-blocks {
margin: 0;
}
#header ul.language-switcher-locale-url li {
padding-right: 10px;
padding-right: 0;
}
#header ul.language-switcher-locale-url li.active {
display: none;
@@ -621,10 +622,10 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** RESPONSIVE */
@media (min-width: 799px) {
#header .logo {
width: 35%;
width: 340px;
}
#header-blocks {
width: 63%;
width: calc(100% - 340px);
position: absolute;
bottom: 0;
right: 0;
@@ -644,7 +645,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
display: inline;
}
#header-blocks .region:not(:first-child) {
margin-left: 1.1em;
margin-left: 0.5em;
}
html.oldie #header-blocks .region {
float: left;
@@ -741,7 +742,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
html.oldie #header-blocks ul li a {
font-size: 9px;
}
body.burger-shown #header-blocks {
body.burger-header-shown #header-blocks {
transform: translateX(0);
}
.burger-icon {
@@ -755,6 +756,9 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
z-index: 20;
cursor: pointer;
}
.burger-icon.sidebar-first {
background-color: #A5A5A5;
}
.burger-icon span {
display: block;
background: #000;
@@ -786,14 +790,17 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
bottom: 2px;
margin-bottom: -2px;
}
body.burger-shown .burger-icon span {
body.burger-header-shown .burger-icon.header span,
body.burger-sidebar-first-shown .burger-icon.sidebar-first span {
background: transparent;
}
body.burger-shown .burger-icon:before {
body.burger-header-shown .burger-icon.header:before,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:before {
top: 55%;
transform: rotate(45deg);
}
body.burger-shown .burger-icon:after {
body.burger-header-shown .burger-icon.header:after,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:after {
bottom: 55%;
transform: rotate(-45deg);
}
@@ -869,22 +876,78 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** MAIN */
#main {
height: 97%;
position: relative;
/** SIDEBAR FIRST */
/** CENTER */
/** SIDEBAR SECOND */
}
#main #sidebar-first {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 29%;
height: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.ie7 #main #sidebar-first,
.ie8 #main #sidebar-first {
display: inline;
#main #sidebar-first .block-menu-block,
#main #sidebar-first .block-menu-block > .content {
height: 100%;
}
#main #sidebar-first #myList-nav {
max-height: 100%;
display: flex;
flex-flow: row nowrap;
}
#main #sidebar-first #myList-nav > div {
flex: 0 0 auto;
width: 1em;
}
#main #sidebar-first #myList-nav > div .ln-letters {
margin: 0;
}
#main #sidebar-first #myList-nav > ul {
flex: 0 0 auto;
box-sizing: border-box;
width: calc(100% - 1em);
max-height: 100%;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
margin-top: 2em;
}
@media (min-width: 799px) {
#main #sidebar-first {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 300px;
}
.ie7 #main #sidebar-first,
.ie8 #main #sidebar-first {
display: inline;
}
}
@media (max-width: 799px) {
#main #sidebar-first {
position: absolute;
top: 0;
left: 0;
width: 70%;
background-color: #A5A5A5;
z-index: 10;
transition: transform 0.5s ease-in-out;
transform: translateX(calc(-100% + 2em));
}
#main #sidebar-first #myList-nav ul {
overflow-y: hidden;
}
body.burger-sidebar-first-shown #main #sidebar-first {
transform: translateX(0);
}
body.burger-sidebar-first-shown #main #sidebar-first #myList-nav ul {
overflow-y: auto;
}
}
#main ul li.leaf {
list-style-image: none;
@@ -978,9 +1041,25 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
margin-left: 75px;
width: 550px;
padding-top: 20px;
box-sizing: border-box;
}
@media (min-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: calc(99% - 300px);
padding: 20px;
}
}
@media (max-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: 100%;
padding: 0.5em 3em;
}
}
.not-front.node-type-page #main #center #content p,
.not-front.node-type-temoignage #main #center #content p,
@@ -1876,7 +1955,7 @@ html.no-js body.front .item-list .pager li,
html.classic-nav body.front .item-list .pager li {
background-color: transparent;
color: #000;
border-left: 1px solid #000;
padding: 0 0.25em;
}
html.no-js body.front .item-list .pager li a,
html.classic-nav body.front .item-list .pager li a,
@@ -1896,7 +1975,6 @@ html.classic-nav body.front .item-list ul li {
margin-bottom: 1em;
padding-right: 1em;
padding-left: 0.5em;
border-left: 3px solid #A5A5A5;
}
html.no-js body.front .item-list li a,
html.classic-nav body.front .item-list li a,
@@ -1908,6 +1986,71 @@ html.no-js body.front .item-list ul li a:visited,
html.classic-nav body.front .item-list ul li a:visited {
color: #A5A5A5;
}
html.no-js body.front #home-performances-list,
html.classic-nav body.front #home-performances-list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: space-between;
}
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
padding: 0 0.5em 0.5em;
margin: 0.5em;
}
html.no-js body.front #home-performances-list > li.with-image,
html.classic-nav body.front #home-performances-list > li.with-image {
flex: 0 1 auto;
}
html.no-js body.front #home-performances-list > li.without-image,
html.classic-nav body.front #home-performances-list > li.without-image {
flex: 1 1 auto;
}
html.no-js body.front #home-performances-list > li h4,
html.classic-nav body.front #home-performances-list > li h4,
html.no-js body.front #home-performances-list > li h5,
html.classic-nav body.front #home-performances-list > li h5 {
max-width: 200px;
margin: 0.5em 0;
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li h4 a,
html.classic-nav body.front #home-performances-list > li h4 a,
html.no-js body.front #home-performances-list > li h5 a,
html.classic-nav body.front #home-performances-list > li h5 a {
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li .date > a,
html.classic-nav body.front #home-performances-list > li .date > a {
display: block;
}
html.no-js body.front #home-performances-list > li figure,
html.classic-nav body.front #home-performances-list > li figure {
display: inline-block;
position: relative;
}
html.no-js body.front #home-performances-list > li figure img.image,
html.classic-nav body.front #home-performances-list > li figure img.image {
max-width: 100%;
}
html.no-js body.front #home-performances-list > li figure img.blank,
html.classic-nav body.front #home-performances-list > li figure img.blank {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html.no-js body.front #home-performances-list > li figure figcaption,
html.classic-nav body.front #home-performances-list > li figure figcaption {
display: none;
}
@media (max-width: 799px) {
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
flex: 0 0 auto;
}
}
html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main {
background-color: #D3D3D3;
@@ -1944,6 +2087,24 @@ html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main {
background-color: #F2F2F2;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
flex: 0 0 auto;
max-width: 45%;
margin: 0.5em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images {
flex: 1 1 100%;
max-width: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title {
margin: 0;
@@ -1951,9 +2112,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 900;
font-size: 24px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-label,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-label {
@@ -1966,28 +2124,16 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-personne,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-personne {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item {
max-height: 300px;
overflow: auto;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
@@ -2006,25 +2152,17 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 16px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
margin: 0 1em 1em 0;
}
.ie7 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie7 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: inline;
flex: 1 0 auto;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance {
@@ -2032,9 +2170,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 16px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre {
@@ -2042,15 +2177,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
font-size: 12px;
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1 {
@@ -2065,9 +2191,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2075,9 +2198,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2085,9 +2205,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-objet,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-objet {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500;
@@ -2096,25 +2213,15 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure {
position: relative;
height: auto!important;
margin: 0.5em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption {
position: absolute;
right: 0;
bottom: 0;
width: 96%;
padding: 2%;
background-color: rgba(255, 255, 255, 0.8);
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
color: #000;
font-size: 10px;
max-width: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure .blank,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure .blank {
@@ -2124,13 +2231,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
width: 100%;
height: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > .field {
display: inline-block;
@@ -2145,17 +2245,6 @@ html.no-js body.node-type-performance #main #center #content .node.type-performa
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents {
display: block;
border: none;
border-top: 2px solid #e4e4e4;
margin-top: 1em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field {
display: inline-block;
vertical-align: top;
padding-left: 0.5em;