Subversion Repositories eFlore/Applications.cel

@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;
}

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;
}

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;
}

#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],
#group-settings-form #new-fields input[required],
#group-settings-form #new-fields select[required] {
  border: 0.2rem solid rgba(0, 159, 184, 0.5);
}

/* 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;
}

/**** 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 .disabled,
#group-settings-form .validated {
  background-color: #eeeeee !important;
  cursor: default;
}

#group-settings-form .validated i {
  color: #c3d45d;
  cursor: default;
}

#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 .remove-field.button,
#group-settings-form .remove-value.button {
  background-color: #ff5d55;
}

#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;
}

#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;
}

#group-settings-form .select-wrapper,
#group-settings-form #new-fields .select-wrapper {
  position: relative;
}

#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 #new-fields .select-wrapper::after {
  /* correction de la position de la flèche
  dans le formulaire des champs ajoutés*/
  top: -10px;
}
/**************************/

/**** 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;
}

/* Mieux distinguer les différentes strates */
#group-settings-form .field-details {
  margin: 1rem 0;
  padding: 2rem;
  border-radius: 0.3rem;
  background-color: #fcfbf9;
}
/********************************************/

/**** 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%;
}

#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;
  cursor: pointer;
  border-radius: 0.2rem;
}

#group-settings-form .input-file,
#group-settings-form #new-fields .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 80%;
  padding: 1rem;
  margin: auto;
  opacity: 0;
  cursor: pointer;
}

/* quelques styles d'interactions */
#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 #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 #new-fields .file-return:not(:empty) img {
  margin: 1rem auto;
  display: block;
}

#group-settings-form .file-return,
#group-settings-form #new-fields .file-return {
  font-style: italic;
  font-size: 1.5rem;
  font-weight: bold;
}
/*************************************/