edit.module.css

/**
 * Animations.
 */
.edit-animate-invisible {
  opacity: 0;
}

.edit-animate-fast {
-webkit-transition: all .2s ease;
   -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
     -o-transition: all .2s ease;
        transition: all .2s ease;
}

.edit-animate-default {
  -webkit-transition: all .4s ease;
     -moz-transition: all .4s ease;
      -ms-transition: all .4s ease;
       -o-transition: all .4s ease;
          transition: all .4s ease;
}

.edit-animate-slow {
-webkit-transition: all .6s ease;
   -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
     -o-transition: all .6s ease;
        transition: all .6s ease;
}

.edit-animate-delay-veryfast {
  -webkit-transition-delay: .05s;
     -moz-transition-delay: .05s;
      -ms-transition-delay: .05s;
       -o-transition-delay: .05s;
          transition-delay: .05s;
}

.edit-animate-delay-fast {
  -webkit-transition-delay: .2s;
     -moz-transition-delay: .2s;
      -ms-transition-delay: .2s;
       -o-transition-delay: .2s;
          transition-delay: .2s;
}

.edit-animate-disable-width {
  -webkit-transition: width 0s;
     -moz-transition: width 0s;
      -ms-transition: width 0s;
       -o-transition: width 0s;
          transition: width 0s;
}

.edit-animate-only-visibility {
  -webkit-transition: opacity .2s ease;
     -moz-transition: opacity .2s ease;
      -ms-transition: opacity .2s ease;
       -o-transition: opacity .2s ease;
          transition: opacity .2s ease;
}

.edit-animate-only-background-and-padding {
  -webkit-transition: background, padding .2s ease;
     -moz-transition: background, padding .2s ease;
      -ms-transition: background, padding .2s ease;
       -o-transition: background, padding .2s ease;
          transition: background, padding .2s ease;
}




/**
 * Candidate editables + editables being edited.
 *
 * Note: every class is prefixed with "edit-" to prevent collisions with modules
 * or themes. In IPE-specific DOM subtrees, this is not necessary.
 */

/* Editable. */
.edit-editable {
  z-index: 300;
  position: relative;
}
.edit-editable:focus {
  outline: none;
}
.edit-field.edit-editable,
.edit-field .edit-editable {
  box-shadow: 0 0 1px 1px #4d9de9;
}

/* Highlighted (hovered) editable. */
.edit-editable.edit-highlighted {
  z-index: 305;
  min-width: 200px;
}
.edit-field.edit-editable.edit-highlighted,
.edit-form.edit-editable.edit-highlighted,
.edit-field .edit-editable.edit-highlighted {
  box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5);
}
.edit-field.edit-editable.edit-highlighted.edit-validation-error,
.edit-form.edit-editable.edit-highlighted.edit-validation-error,
.edit-field .edit-editable.edit-highlighted.edit-validation-error {
  box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5);
}
.edit-form.edit-editable .form-item .error {
  border: 1px solid #eea0a0;
}


/* Editing (focused) editable. */
.edit-form.edit-editable.edit-editing,
.edit-field .edit-editable.edit-editing {
  /* In the latest design, there's no special styling when editing as opposed to
   * just hovering.
   * This will be necessary again for http://drupal.org/node/1844220.
   */
}




/**
 * Edit mode: modal.
 */
#edit_modal {
  z-index: 350;
  position: fixed;
  top: 40%;
  left: 40%;
  box-shadow: 3px 3px 5px #333;
  background-color: white;
  border: 1px solid #0199ff;
  font-family: 'Droid sans', 'Lucida Grande', sans-serif;
}

#edit_modal .main {
  font-size: 130%;
  margin: 25px;
  padding-left: 40px;
  background: transparent url('../images/attention.png') no-repeat;
}

#edit_modal .actions {
  border-top: 1px solid #ddd;
  padding: 3px inherit;
  text-align: right;
  background: #f5f5f5;
}




/**
 * Edit mode: type=direct.
 */
.edit-validation-errors {
  z-index: 300;
  position: relative;
}

.edit-validation-errors .messages.error {
  position: absolute;
  top: 6px;
  left: -5px;
  margin: 0;
  border: none;
  box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5);
  background-color: white;
}




/**
 * Edit mode: type=form.
 */
#edit_backstage {
  display: none;
}

.edit-form {
  position: absolute;
  z-index: 300;
  box-shadow: 0 0 30px 4px #4f4f4f;
  max-width: 35em;
  background-color: white;
}

.edit-form .placeholder {
  min-height: 22px;
}

/* Default form styling overrides. */
.edit-form form { padding: 1em; }
.edit-form .form-item { margin: 0; }
.edit-form .form-wrapper { margin: .5em; }
.edit-form .form-wrapper .form-wrapper { margin: inherit; }
.edit-form .form-actions { display: none; }
.edit-form input { max-width: 100%; }




/**
 * Edit mode: toolbars
 */

/* Trick: wrap statically positioned elements in relatively positioned element
   without changing its location. This allows us to absolutely position the
   toolbar.
*/
.edit-toolbar-container,
.edit-form-container {
  position: relative;
  padding: 0;
  border: 0;
  margin: 0;
  vertical-align: baseline;
  z-index: 310;
}
.edit-toolbar-container {
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.edit-toolbar-heightfaker {
  height: auto;
  position: absolute;
  bottom: 1px;
  box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5);
  background: #fff;
  display: none;
}
.edit-highlighted .edit-toolbar-heightfaker {
  display: block;
}

/* The toolbar; these are not necessarily visible. */
.edit-toolbar {
  position: relative;
  height: 100%;
  font-family: 'Droid sans', 'Lucida Grande', sans-serif;
}
.edit-toolbar-heightfaker {
  clip: rect(-1000px, 1000px, auto, -1000px); /* Remove bottom box-shadow. */
}
/* Exception: when the toolbar is instructed to be "full width". */
.edit-toolbar-fullwidth .edit-toolbar-heightfaker {
  width: 100%;
  clip: auto;
}


/* The toolbar contains toolgroups; these are visible. */
.edit-toolgroup {
  float: left; /* LTR */
}

/* Info toolgroup. */
.edit-toolgroup.info {
  float: left; /* LTR */
  font-weight: bolder;
  padding: 0 5px;
  background: #fff url('../images/throbber.gif') no-repeat -60px 60px;
}
.edit-toolgroup.info.loading {
  padding-right: 35px;
  background-position: 90% 50%;
}

/* Operations toolgroup. */
.edit-toolgroup.ops {
  float: right; /* LTR */
  margin-left: 5px;
}

.edit-toolgroup.wysiwyg-floated {
  float: right;
}
.edit-toolgroup.wysiwyg-main {
  clear: left;
  width: 100%;
  padding-left: 0;
}



/**
 * Edit mode: buttons (in both modal and toolbar).
 */
#edit_modal button,
.edit-toolbar button {
  float: left; /* LTR */
  display: block;
  height: 29px;
  min-width: 29px;
  padding: 3px 6px 6px 6px;
  margin: 4px 5px 1px 0;
  border: 1px solid #fff;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
#edit_modal button {
  float: none;
  display: inline-block;
}

/* Button with icons. */
#edit_modal button span,
.edit-toolbar button span {
  width: 22px;
  height: 19px;
  display: block;
  float: left;
}
.edit-toolbar span.close {
  background: url('../images/close.png') no-repeat 3px 2px;
  text-indent: -999em;
  direction: ltr;
}

.edit-toolbar button.blank-button {
  color: black;
  background-color: #fff;
  font-weight: bolder;
}

#edit_modal button.blue-button,
.edit-toolbar button.blue-button {
  color: white;
  background-image: -webkit-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%);
  background-image: -moz-linear-gradient(top, #6fc2f2 0%, #4e97c0 100%);
  background-image: linear-gradient(top, #6fc2f2 0%, #4e97c0 100%);
  border-radius: 5px;
}

#edit_modal button.gray-button,
.edit-toolbar button.gray-button {
  color: #666;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ccc 100%);
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #ccc 100%);
  background-image: linear-gradient(top, #f5f5f5 0%, #ccc 100%);
  border-radius: 5px;
}

#edit_modal button.blue-button:hover,
.edit-toolbar button.blue-button:hover,
#edit_modal button.blue-button:active,
.edit-toolbar button.blue-button:active {
  border: 1px solid #55a5d3;
  box-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

#edit_modal button.gray-button:hover,
.edit-toolbar button.gray-button:hover,
#edit_modal button.gray-button:active,
.edit-toolbar button.gray-button:active {
  border: 1px solid #cdcdcd;
  box-shadow: 0 2px 1px rgba(0,0,0,0.1);
}