WebSVN – eFlore/Applications.cel – /trunk/widget/modules/manager/squelettes/css/manager.css

@CHARSET "UTF-8";

body {
  font-family: Ubuntu,Verdana,sans-serif !important;
}

div.widget-blocks {
  box-sizing: border-box;
  padding: 3rem;
  margin-bottom: 5rem;
}

#zone-appli #register-page .widget-blocks .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: 3rem;
  font-weight: 700;
  line-height: 3.2rem;
  margin: 0;
  position: relative;
  color: #232323;
}

#zone-appli #register-page .widget-blocks h2 {
  font-size: 2.3rem;
  line-height: 1.15;
}

#zone-appli #register-page .widget-blocks h3 {
  font-size: 2rem;
  margin-top: 0.5rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks button,
#group-settings-form .button {
  font-size: 1.6rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks input,
#zone-appli #register-page #group-settings-form .widget-blocks select,
#zone-appli #register-page #group-settings-form .widget-blocks textarea {
  font-size: 1.3rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .message {
  background-color: #f8f5ef;
  color: #232323;
  padding: 1rem;
  border-radius: 0.3rem;
  font-size: 1.3rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .hidden {
  display: none;
}

/* Aperçu du widget */
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer {
  border-radius: 0.3rem;
  padding: 0 3rem 3rem 3rem;
  min-height: 100%;
  width: 100%;
  /*pointer-events: none;*/
  overflow: hidden;
  /*background: rgba(248, 245, 239, 0.6);*/
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer h1 {
  font-size: 3rem;
  line-height: 3.2rem;
  width: 100%;
  color: #232323;
  margin: 1rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer h1,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer h2 span,
#zone-appli #register-page #group-settings-form .widget-blocks h3 .field-title,
#zone-appli #register-page #group-settings-form .widget-blocks .list-label,
#zone-appli #register-page #group-settings-form .widget-blocks label {
  text-transform: capitalize;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer h2 {
  width: 100%;
  color: #232323;
  margin: 1rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .and-help {
  width: 80%;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .and-help.input-file-container {
  width: 73.8%;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer label.and-help,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .list-label.and-help {
  margin-bottom:1.5rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer label.and-help,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .list-label.and-help,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .select-wrapper.and-help,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .multiselect.and-help {
  display:inline-block;
}

#zone-appli #register-page #group-settings-form .widget-blocks form {
  margin-bottom: 2rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .list-label,
#zone-appli #register-page #group-settings-form .widget-blocks label {
  color: #606060;
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  margin-top: 2rem;
  font-weight: 300;
}

#zone-appli #register-page #group-settings-form .widget-blocks .checkbox,
#zone-appli #register-page #group-settings-form .widget-blocks .radio {
  padding-left: 0;
}

#zone-appli #register-page #group-settings-form .widget-blocks .checkbox label,
#zone-appli #register-page #group-settings-form .widget-blocks .radio label{
  padding-left: 1rem;
}

#preview-formulaire,
#preview-header,
#preview-messages {
  padding: 2rem;
  border-radius: 0.3rem;
  background-color: rgba(255, 255, 255, 0.8);
  margin-top: 2rem;
}

.register-section{
  margin-bottom: 1rem;
}

/* Formulaires du nouveau widget*/
#group-settings-form {
  float: none;
}

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

/**** Styles des boutons ****/

/* 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 */
#zone-appli #register-page #group-settings-form .widget-blocks  #submit-button {
  position: absolute;
  bottom: -20px;
}

#zone-appli #register-page #group-settings-form .widget-blocks  #add-fields.button,
#zone-appli #register-page #group-settings-form .widget-blocks  .add-value-button.button {
  background-color: #009fb8;
}

#zone-appli #register-page #group-settings-form .widget-blocks  #add-fields.button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks  #add-fields.button:focus,
#zone-appli #register-page #group-settings-form .widget-blocks  .add-value-button.button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks  .add-value-button.button:focus {
  background-color: rgba(0, 159, 184, 0.7);
}

#zone-appli #register-page #group-settings-form .widget-blocks .remove-field.button,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-value.button,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file {
  background-color: #ff5d55;
}

#zone-appli #register-page #group-settings-form .widget-blocks .remove-field.button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-field.button:focus,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-value.button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-value.button:focus,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file:focus {
  background-color: rgba(255, 93, 85, 0.7);
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button {
  background-color: #ea9973;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file {
  margin-left: 0.5rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .remove-file,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button {
  border-radius: 0.2rem;
  padding: 1rem 1rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button:focus,
#zone-appli #register-page #group-settings-form .widget-blocks .fichier-type:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .fichier-type:focus {
  background-color: rgba(234, 153, 115, 0.7);
}
/*
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file i {
  font-size: 1.6rem;
}*/

#zone-appli #register-page #group-settings-form .widget-blocks .fichier-type {
  text-transform: capitalize;
  font-size: 1.5rem;
  margin-left: 0;
  padding: 0.8rem;
  background-color: #ea9973;
  text-decoration: none;
  color: #ffffff;
  border-radius: 0.2rem;
}


/**** style du formulaire des nouveaux champs après validation ****/
#zone-appli #register-page #group-settings-form .widget-blocks .disabled,
#zone-appli #register-page #group-settings-form .widget-blocks .validated {
  background-color: #eeeeee;
  cursor: default;
  pointer-events: none;
}

#zone-appli #register-page #group-settings-form .widget-blocks .invalid {
  box-shadow : 0 0 1.5px 1px red;
}

/* Le picto validation apparait en vert */
#group-settings-form .validated i {
  color: #c3d45d;
  cursor: default;
}

/* La couleur de fond du formulaire lui-même ne change pas */
#zone-appli #register-page #group-settings-form .widget-blocks #new-fields.disabled{
  background-color: initial;
}

/* annuler un position absolute provenant de bundle.css */
#zone-appli #register-page #group-settings-form .widget-blocks fieldset > p {
  position: static;
  right: initial;
  top: initial;
  width: auto;
  text-align: left;
  color: #606060;
}

/*************************************************/

/**** Style des select ****/
#group-settings-form select,
#group-settings-form .selectBox select {
  background-color: rgba(0, 159, 184, 0.5);
  border:  0.1rem solid #ddd;
}

#group-settings-form select {
  font-size: 3rem;
  font-weight: 900;
}

#group-settings-form select,
#group-settings-form select:required,
#group-settings-form .selectBox select,
#group-settings-form .selectBox select:required {
  width: 100%;
  color:#fff;
  border-radius: 0.3rem;
  padding: 0.8rem;
  line-height: 1.15;
}

#group-settings-form select,
#group-settings-form select:required {
  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,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox {
  position: relative;
  border: 0.1rem solid #ddd;
  border-radius: 0.3rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .input-group .select-wrapper {
  border:none;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .checkboxes {
  border: 0.1rem solid #ddd;
  border-radius: 0 0.3rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .label label,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .checkboxes label {
  display: block;
  padding: 0.5rem;
  line-height: 1.15;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer #checkboxes label:hover {
  background-color: #1e90ff;
}

#group-settings-form .select-wrapper::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox::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: #fff;
}

#group-settings-form #new-fields .select-wrapper::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer  .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 fieldset.new-field,
#group-settings-form .new-value {
  position: static;
  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: 86.9%;
  display: inline-block;
}

#group-settings-form .label-file,
#group-settings-form #new-fields .label-file {
  display: block;
  padding: 0.7rem;
  background: #009FB8;
  color: #fff !important;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 0.3rem;
}

#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: 1rem;
  font-weight: bold;
  background-color: #fff;
  padding: 2rem;
  border-radius: 0.3rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks input[type="date"],
#zone-appli #register-page #group-settings-form .widget-blocks input[type="number"],
#zone-appli #register-page #group-settings-form .widget-blocks input[type="email"] {
  line-height: 1.15;
  margin: 0;
  padding: 1rem;
  border: 0.1rem solid #ddd;
  border-radius: 0.3rem;
  width: 100%;
  box-sizing: inherit;
}

/*************************************/

#signup_submit {
  font-weight: 700;
}

.modal-header .close {
  margin-top: -2rem !important;
}

@media screen and (min-width: 992px) {
  div.widget-blocks {
    position: sticky;
    top: 20px;
  }
}
Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/css/manager.css – Rev 3183
