WebSVN – eFlore/Applications.cel – /branches/v3.00-serfouette/widget/modules/manager/squelettes/css/manager.css

@CHARSET "UTF-8";

*,
*:hover,
*:focus,
*:active {
  outline: 0 !important;
  outline-style: none !important;
}

button:not(#tb-geolocation *):focus,
a:focus, a:active {
  outline: none !important;
}

input:not(#tb-geolocation *)::-moz-focus-inner {
  border: 0 !important;
}

button:not(.mat-icon-button)::-moz-focus-inner,
input[type="reset"]:not(#tb-geolocation *)::-moz-focus-inner,
input[type="button"]:not(#tb-geolocation *)::-moz-focus-inner,
input[type="submit"]:not(#tb-geolocation *)::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner,
select:not(#tb-geolocation *)::-moz-focus-inner,
select:not(#tb-geolocation *):-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #000 !important;
  outline: none !important;
}

select:focus::-ms-value {
  background-color: $input-bg !important;
  color: $input-color !important;
}

body:not(#tb-geolocation *) {
  font-family: Ubuntu,Verdana,sans-serif !important;
}

div.widget-blocks {
  box-sizing: border-box;
  padding: 1rem;
}

#zone-appli #register-page .widget-blocks {
  clear: both;
  /* Précaution pour IE 7 */
  overflow: hidden;
  position: relative;
}

h1#widget-titre::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  left: -5rem;
  width: 0.4rem;
}

h1#widget-titre {
  font-size: 2rem;
  font-weight: 700;
  line-height: 3.2rem;
  margin: 0;
  position: relative;
  color: #232323;
}

#zone-appli #register-page #group-settings-form .widget-blocks p {
  font-size: 0.8rem;
}

.message-echec,
.message-succes {
  margin: 1rem auto;
  border: 0.1rem solid;
  border-radius: 0.3rem;
  padding: 0.5rem;
  text-align: center;
}

.message-echec {
  background-color: #f9e2d7;
  border-color: #eca27e;
  color: #9c4217;
  fill: #9c4217;
}

.message-succes {
  background-color: #e9f2b7;
  border-color: #cfe261;
  color: #444e09;
  fill: #444e09;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

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

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

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

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

/*** Styles généraux des champs ****/
/* Formulaires du nouveau widget*/

#zone-appli #register-page #group-settings-form #left-block.widget-blocks {
  width: 100%;
  padding-bottom: 50px;
}

#zone-appli #register-page #group-settings-form #right-block.widget-blocks {
  width: 100%;
}

#zone-appli #register-page #group-settings-form .widget-blocks form:not(#tb-geolocation *) {
  margin-bottom: 2rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .register-section {
  margin-top: 1.5rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks input:not(.mat-input-element,.invalid),
#zone-appli #register-page #group-settings-form .widget-blocks select:not(.mat-input-element),
#zone-appli #register-page #group-settings-form .widget-blocks textarea:not(.mat-input-element) {
  width: 100%;
  border-radius: 0.2rem;
  font-size: 0.7rem;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: color 0 ease-in;
  transition: none;
  border: 0.1rem solid #ddd;
  box-shadow: none !important;
}

#zone-appli #register-page #group-settings-form .widget-blocks input:not(.mat-input-element) {
  overflow: visible;
}

/* Style des checkboxes et radios */
#zone-appli #register-page #group-settings-form .widget-blocks .number {
  width: 100%;
}

#zone-appli #register-page #group-settings-form .widget-blocks label:not(.mat-form-field-label),
#zone-appli #register-page #group-settings-form .widget-blocks .list-label {
  color: #606060;
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}

#zone-appli #register-page #group-settings-form #right-block.widget-blocks .checkbox label,
#zone-appli #register-page #group-settings-form #right-block.widget-blocks .checkboxes label,
#zone-appli #register-page #group-settings-form #right-block.widget-blocks .radio label {
  font-weight: 300;
}

#zone-appli #register-page #group-settings-form .widget-blocks label.radio-label {
  font-weight: 700;
}

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

/**** Style des select et checkbox-list ****/
#zone-appli #register-page #group-settings-form .widget-blocks select:not(#tb-geolocation *),
#zone-appli #register-page #group-settings-form .widget-blocks .selectBox select {
  background-color: #fff;
  border: 0.1rem solid #ddd;
}


#zone-appli #register-page #group-settings-form .widget-blocks .add-field-select {
  width: 100%;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox {
  position: relative;
  border-radius: 0.2rem;
}

#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-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  position: absolute;
  z-index: 1001;
  top: 100%;
  left: 1rem;
  right: 1rem;
  background-color: #fff;
  padding-bottom: 0.5rem;
}

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

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

/**** 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: 84.9%;
  display: inline-block;
  line-height: 0.9rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .input-file-row {
  margin: 1.5rem 0;
  min-width: 100% !important;
}

#group-settings-form .label-file,
#group-settings-form #new-fields .label-file {
  display: block;
  padding: 0.6rem;
  background: #009FB8;
  color: #fff !important;
  /*font-size: 1.5rem;*/
  cursor: pointer;
  border-radius: 0.2rem;
  margin-bottom: 0;
  line-height: 0.9rem;
  font-size: 0.8rem !important;
}

#group-settings-form .input-file,
#group-settings-form #new-fields .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 90% !important;
  margin: 0 0.9rem !important;
  padding-bottom: 0;
  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: 0.8rem;
}

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

#group-settings-form #new-fields .file-return {
  margin: 0.5rem auto;
  width: 90%;
}
/*************************************/

/**** Affichage des nouveaux champs ****/
/* Mieux distinguer les différentes strates */
#group-settings-form fieldset.new-field,
#group-settings-form .new-value {
  position: static;
  border-radius: 0.2rem;
  background-color: #F8F5EF;
  margin: 0 0.5rem 0.5rem 0.5rem;
  padding: 1rem;
}

#group-settings-form fieldset.new-field {
  padding: 1rem;
  margin: 1rem 0;
}

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

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

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

#zone-appli #register-page #group-settings-form .widget-blocks button:not(.mat-icon-button),
#group-settings-form .button {
  background-color: #a2b93b;
  border-radius: 0.2rem;
  border: 0 none;
  padding: 0.9rem;
  cursor: pointer;
  color: #fff;
  display: inline-block;
  font-family: Ubuntu,sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 0.9rem;
  text-align: center;
  text-decoration: none;
  /*text-transform: capitalize;*/
  -webkit-transition: background .2s ease;
  -o-transition: background .2s ease;
  transition: background .2s ease;
}

.fa, .fab, .fal, .far, .fas {
  line-height: 0.9rem;
}
.remove-file .fas {
  line-height: 1.4rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks button:not(.mat-icon-button):hover,
#zone-appli #register-page #group-settings-form .widget-blocks button:not(.mat-icon-button):focus,
#group-settings-form .button:hover,
#group-settings-form .button:focus {
  background-color: #b3c954;
}

#zone-appli #register-page #group-settings-form .widget-blocks #bouton-connexion .btn {
  background-color:#a2b93b;border-color:#a1b92e;
  color: #fff;
}

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

#signup_submit {
  font-weight: 700;
}

#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 .btn-danger,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-field.button,
#zone-appli #register-page #group-settings-form .widget-blocks .remove-value.button {
  background-color: #ff5d55;
  border: 0 none;
}

#zone-appli #register-page #group-settings-form .widget-blocks .btn-danger:hover,
#zone-appli #register-page #group-settings-form .widget-blocks .btn-danger:focus,
#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 {
  background-color: rgba(255, 93, 85, 0.7);
  border: 0 none;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .help-button {
  float: right;
}

#zone-appli #register-page #group-settings-form .widget-blocks .remove-file {
  width: 2rem;
  height: 2rem;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .border-0 {
  border: 0 !important;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .btn-outline-info {
  color: #17a2b8;
  background-color: transparent;
  background-image: none;
  border-color: #17a2b8;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .btn-outline-info:focus {
  box-shadow: 0 0 0 .2rem rgba(23,162,184,.5);
}

#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 .fichier-type {
  text-transform: capitalize;
  /*font-size: 1.5rem;*/
  margin-left: 0;
  padding: 0.6rem;
  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-key,
#zone-appli #register-page #group-settings-form .widget-blocks .invalid {
  box-shadow : 0 0 1.5px 1px red;
}

.error {
  color : red;
}

span.error {
  font-size: 0.8rem;
}

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

/**** Prévisualisation du widget ****/
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer {
  border-radius: 0.2rem;
  padding: 0 3rem 3rem 3rem;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgba(248, 245, 239, 0.6);
  position: relative;
}

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

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

#zone-appli #register-page #group-settings-form .widget-blocks .checkbox label,
#zone-appli #register-page #group-settings-form .widget-blocks .checkboxes label,
#zone-appli #register-page #group-settings-form .widget-blocks .radio label {
  display: flex;
  align-items: center;
}

#zone-appli #register-page #group-settings-form .widget-blocks input[type="checkbox"],
#zone-appli #register-page #group-settings-form .widget-blocks input[type="radio"],
#zone-appli #register-page #group-settings-form .widget-blocks input.radio,
#zone-appli #register-page #group-settings-form .widget-blocks input.checkbox {
  vertical-align: text-top;
  padding: 0;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  width: 1rem;
}

.mb-2, .mb-3 {
  align-self: start;
}

#new-fields-buttons {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

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

/**** Input Type Range ****/
#zone-appli #register-page #group-settings-form .widget-blocks .range input {
  border:none;
}

#zone-appli #register-page #group-settings-form .widget-blocks .range-values {
  color: #606060;
}

#zone-appli #register-page #group-settings-form .widget-blocks .range-live-value {
  padding-top: 1rem;
  font-size: 1.5rem;
}

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

/**** Style de la modale ****/
.modal-header .close {
  margin-top: -2rem !important;
}
/****************************/

/**** style required preview ****/

#label-geolocalisation::before,
#label-date::before,
#label-taxon::before,
#label-certitude::before {
  content: '*';
}

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

/**** media queries  ****/
@media screen and (min-width: 992px) {
  #zone-appli #register-page #group-settings-form #left-block.widget-blocks {
    display: inline-block;
    width: 49%;
    padding-bottom: 50px;
  }

  #zone-appli #register-page #group-settings-form #right-block.widget-blocks {
    display: inline-block;
    width: 49%;
    overflow: visible;
    vertical-align:top;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  #zone-appli #register-page #group-settings-form .widget-blocks #submit-button {
    bottom: 10px;
  }
}
Subversion Repositories eFlore/Applications.cel

(root)/branches/v3.00-serfouette/widget/modules/manager/squelettes/css/manager.css @ 3993 – Rev 3667
