1,149 → 1,220 |
@CHARSET "UTF-8"; |
|
.clear { |
clear: both; |
height: 0; |
|
/* Précaution pour IE 7 */ |
overflow: hidden; |
} |
|
h1#widget-titre::before { |
content: ""; |
display: block; |
height: 100%; |
position: absolute; |
left: -5rem; |
width: 0.4rem; |
|
content: ""; |
display: block; |
height: 100%; |
position: absolute; |
left: -5rem; |
width: 0.4rem; |
} |
|
h1#widget-titre { |
font-size: 2.6rem; |
font-weight: 700; |
line-height: 3.2rem; |
margin: 0; |
position: relative; |
color: #232323; |
font-family: Ubuntu,sans-serif; |
font-size: 2.6rem; |
font-weight: 700; |
line-height: 3.2rem; |
margin: 0; |
position: relative; |
color: #232323; |
font-family: Ubuntu,sans-serif; |
} |
|
#group-settings-form { |
font-family: Muli,sans-serif; |
float: none; |
h2 { |
font-family: Muli,sans-serif; |
font-size: 21.5px; |
font-weight: 700; |
line-height: 1.15; |
} |
|
h2 { |
font-family: Muli,sans-serif; |
font-size: 21.5px; |
font-weight: 700; |
line-height: 1.15; |
div.widget-blocks { |
box-sizing: border-box; |
padding: 1rem; |
} |
|
.message { |
background-color: #f8f5ef; |
color: #232323; |
padding: 1rem; |
} |
|
/* Aperçu du widget */ |
.widget-renderer { |
border:none; |
padding: 3rem; |
height: 300rem; |
min-height: 100%; |
width: 90%; |
pointer-events: none; |
overflow: hidden |
} |
|
.register-section{ |
margin-bottom: 1rem; |
} |
|
/* Formulaires du nouveau widget*/ |
#group-settings-form { |
font-family: Muli,sans-serif; |
float: none; |
margin-bottom: 2rem; |
position: absolute; |
} |
|
#group-settings-form label { |
color: #606060; |
display: block; |
font-size: 1.5rem; |
margin-bottom: 0.4rem; |
margin-top: 2rem; |
font-weight: 700; |
color: #606060; |
display: block; |
font-size: 1.5rem; |
margin-bottom: 0.4rem; |
margin-top: 2rem; |
font-weight: 700; |
} |
|
#group-settings-form #langue{ |
width: 100%; |
border: 0.1rem solid #ddd; |
border-radius: 0.3rem; |
padding: 1rem; |
overflow: hidden; |
} |
|
/* Styles des champs required*/ |
#group-settings-form .register-section input[required], |
#group-settings-form .register-section select[required] { |
border: 0.2rem solid rgba(0, 159, 184, 0.5); |
#group-settings-form .register-section select[required], |
#group-settings-form #new-fields input[required], |
#group-settings-form #new-fields select[required] { |
border: 0.2rem solid rgba(0, 159, 184, 0.5); |
} |
|
#group-settings-form select { |
background-color: #fff; |
border: 0.1rem solid #ddd; |
/* Positionnement visuel du bouton submit pour qu'il reste |
sous les nouveaux champs alors que dans le dom |
il est positionné avant les nouveaux champs */ |
#group-settings-form #submit-button { |
position: absolute; |
bottom: -50px; |
} |
|
#group-settings-form select, |
#group-settings-form select[required] { |
border-radius: 0.3rem; |
padding:0.5rem; |
-webkit-appearance: none; |
-moz-appearance: none; |
-ms-appearance: none; |
-o-appearance: none; |
appearance: none; |
width: 100%; |
color:#333; |
text-transform:none; |
/**** Styles des boutons ajouter et supprimer ****/ |
#group-settings-form #add-fields.button, |
#group-settings-form .add-value-button.button { |
background-color: #009fb8; |
} |
|
#group-settings-form .select-wrapper { |
position: relative; |
#group-settings-form #add-fields.button:hover, |
#group-settings-form #add-fields.button:focus, |
#group-settings-form .add-value-button.button:hover, |
#group-settings-form .add-value-button.button:focus { |
background-color: rgba(0, 159, 184, 0.7); |
} |
|
#group-settings-form .select-wrapper::after { |
content: '⌄'; |
font-size: 3rem; |
font-weight: 900; |
position: absolute; |
top: 0; |
right: 0.5rem; |
color: #606060; |
pointer-events: none; |
#group-settings-form .remove-field.button, |
#group-settings-form .remove-value.button { |
background-color: #ff5d55; |
} |
|
#group-settings-form #langue{ |
width: 100%; |
border: 0.1rem solid #ddd; |
border-radius: 0.3rem; |
padding: 1rem; |
overflow: hidden; |
#group-settings-form .remove-field.button:hover, |
#group-settings-form .remove-field.button:focus, |
#group-settings-form .remove-value.button:hover, |
#group-settings-form .remove-value.button:focus { |
background-color: rgba(255, 93, 85, 0.7); |
} |
/*************************************************/ |
|
/**** Style des select ****/ |
#group-settings-form select { |
background-color: #fff; |
border: 0.1rem solid #ddd; |
} |
|
div.widget-blocks { |
box-sizing: border-box; |
padding: 1rem; |
#group-settings-form select, |
#group-settings-form select[required] { |
|
width: 100%; |
color:#333; |
border-radius: 0.3rem; |
padding:0.5rem; |
text-transform:none; |
|
/* On retire la 'flèche' par defaut */ |
-webkit-appearance: none; |
-moz-appearance: none; |
-ms-appearance: none; |
-o-appearance: none; |
appearance: none; |
} |
|
.message { |
background-color: #f8f5ef; |
color: #232323; |
padding: 1rem; |
margin: 1rem; |
#group-settings-form .select-wrapper, |
#group-settings-form #new-fields .select-wrapper { |
position: relative; |
} |
|
iframe.widget-renderer { |
|
border:none; |
margin: 1rem; |
height: 300rem; |
min-height: 100%; |
width: 90%; |
pointer-events: none; |
overflow: hidden |
#group-settings-form .select-wrapper::after { |
/* Ajout et style d'une "flèche bas" */ |
content: '⌄'; |
pointer-events: none; |
position: absolute; |
top: 0; |
right: 0.5rem; |
font-size: 3rem; |
font-weight: 900; |
color: #606060; |
} |
|
#group-settings-form input#add_fields.button { |
background-color: #009fb8; |
#group-settings-form #new-fields .select-wrapper::after { |
/* correction de la position de la flèche |
dans le formulaire des champs ajoutés*/ |
top: -10px; |
} |
/**************************/ |
|
.clear { |
clear: both; |
height: 0; |
overflow: hidden; /* Précaution pour IE 7 */ |
/**** Affichage des nouveaux champs ****/ |
|
/* Mieux distinguer les différentes strates */ |
#group-settings-form .new-field, |
#group-settings-form .new-value { |
margin: 1rem 0; |
padding: 2rem; |
border-radius: 0.3rem; |
background-color: #F8F5EF; |
} |
|
.register-section{ |
margin-bottom: 1rem; |
/* Mieux distinguer les différentes strates */ |
#group-settings-form .field-details { |
margin: 1rem 0; |
padding: 2rem; |
border-radius: 0.3rem; |
background-color: #fcfbf9; |
} |
/********************************************/ |
|
|
/* styles de base si JS est activé */ |
.js #group-settings-form .input-file-container { |
/**** Style des input type "file" ****/ |
/* styles de base */ |
#group-settings-form .input-file-container, |
#group-settings-form #new-fields .input-file-container { |
position: relative; |
width: 100%; |
} |
.js #group-settings-form .label-file { |
|
#group-settings-form .label-file, |
#group-settings-form #new-fields .label-file { |
display: block; |
padding: 1rem; |
background: #009FB8; |
color: #fff !important; |
font-size: 1.5rem; |
transition: all .4s; |
cursor: pointer; |
border-radius: 0.2rem; |
} |
.js #group-settings-form .input-file { |
|
#group-settings-form .input-file, |
#group-settings-form #new-fields .input-file { |
position: absolute; |
top: 0; left: 0; |
width: 80%; |
154,35 → 225,35 |
} |
|
/* quelques styles d'interactions */ |
.js #group-settings-form .input-file:hover + .label-file, |
.js #group-settings-form .input-file:focus + .label-file, |
.js #group-settings-form .label-file:hover, |
.js #group-settings-form .label-file:focus { |
background: #3071A9; |
#group-settings-form .input-file:hover + .label-file, |
#group-settings-form .input-file:focus + .label-file, |
#group-settings-form .label-file:hover, |
#group-settings-form .label-file:focus, |
#group-settings-form #new-fields .input-file:hover + .label-file, |
#group-settings-form #new-fields .input-file:focus + .label-file, |
#group-settings-form #new-fields .label-file:hover, |
#group-settings-form #new-fields .label-file:focus { |
background: rgba(0, 159, 184, 0.7); |
color: #fff; |
} |
|
/* styles du retour visuel */ |
#group-settings-form .file-return:not(:empty)::before{ |
#group-settings-form .file-return:not(:empty)::before, |
#group-settings-form #new-fields .file-return:not(:empty)::before { |
content:'Nom du fichier: '; |
font-size: 1rem; |
} |
|
#group-settings-form .file-return:not(:empty) img{ |
#group-settings-form .file-return:not(:empty) img, |
#group-settings-form #new-fields .file-return:not(:empty) img { |
margin: 1rem auto; |
display: block; |
} |
|
.js #group-settings-form .file-return { |
#group-settings-form .file-return, |
#group-settings-form #new-fields .file-return { |
font-style: italic; |
font-size: 1.5rem; |
font-weight: bold; |
} |
/* on complète l'information d'un contenu textuel |
uniquement lorsque le paragraphe n'est pas vide */ |
/*.js #group-settings-form .file-return:not(:empty):before { |
content: "Fichier sélectionné: "; |
font-style: normal; |
font-weight: normal; |
} |
*/ |
/*************************************/ |