quickedit.theme.css in Quick Edit 7

Styling for Quick Edit module.

File

css/quickedit.theme.css

/**
 * @file
 * Styling for Quick Edit module.
 */

/**
 * Editable.
 */
.quickedit-field.quickedit-editable,
.quickedit-field .quickedit-editable {
  box-shadow: 0 0 0 2px #74b7ff;
}

/**
 * Highlighted (hovered) editable.
 */
.quickedit-field.quickedit-highlighted,
.quickedit-form.quickedit-highlighted,
.quickedit-field .quickedit-highlighted {
  box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
}
.quickedit-field.quickedit-changed,
.quickedit-form.quickedit-changed,
.quickedit-field .quickedit-changed {
  box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
}
.quickedit-editing.quickedit-validation-error,
.quickedit-form.quickedit-validation-error {
  box-shadow: 0 0 0px 1px #ee8b74, 0 0 0 2px #fa2209;
}
.quickedit-editing.quickedit-editor-is-popup {
  box-shadow: none;
}
.quickedit-form .form-item .error {
  border: 1px solid #eea0a0;
}

/**
 * Default form styling overrides.
 */
.quickedit-form form {
  padding: 0.5em;
}
.quickedit-form .form-item {
  margin: 0;
}
.quickedit-form .form-wrapper {
  margin: .5em;
}

/**
 * Animations.
 */
.quickedit-animate-invisible {
  opacity: 0;
}
.quickedit-animate-default {
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.quickedit-animate-slow {
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
}
.quickedit-animate-delay-veryfast {
  -webkit-transition-delay: .05s;
  transition-delay: .05s;
}
.quickedit-animate-delay-fast {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.quickedit-animate-disable-width {
  -webkit-transition: width 0s;
  transition: width 0s;
}
.quickedit-animate-only-visibility {
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

/**
 * In-place editors that don't use a popup.
 */
.quickedit-validation-errors .messages.error {
  box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, .5);
  background-color: white;
}

/**
 * Styling specific to the 'form' in-place editor.
 */
.quickedit-form {
  box-shadow: 0 0 30px 4px #4f4f4f;
  background-color: white;
}

/**
 * Toolbars.
 */
.quickedit-toolbar-container {
  font-family: 'Source Sans Pro','Lucida Grande', sans-serif;
  padding-bottom: 7px;
  padding-top: 7px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.quickedit-toolbar-container > .quickedit-toolbar-content {
  background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
  background-image:    -moz-linear-gradient(top, #fff, #e4e4e4);
  background-image:      -o-linear-gradient(top, #fff, #e4e4e4);
  background-image:   linear-gradient(to bottom, #fff, #e4e4e4);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: black;
  padding: 0.1667em;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2;
}
.quickedit-toolbar-container > .quickedit-toolbar-pointer {
  background-color: #e4e4e4;
  bottom: 2px;
  box-shadow: 0 0 0 1px #818181, 0px 0px 0 4px rgba(150, 150, 150, 0.5);
  display: block;
  height: 16px;
  left: 18px; /* LTR */
  position: absolute;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 16px;
  z-index: 1;
}
[dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer {
  left: auto;
  right: 18px;
}
.quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer {
  bottom: auto;
  top: 2px;
}
.quickedit-toolbar-container > .quickedit-toolbar-lining {
  bottom: 7px;
  box-shadow: 0 0 0 1px #818181, 0px 3px 0px 1px rgba(150, 150, 150, 0.5);
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 7px;
  z-index: 0;
}

.quickedit-toolbar-label {
  font-style: italic;
  overflow: hidden;
  padding: 0.333em 0.4em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quickedit-toolbar-label .field:after {
  content: ' → '; /* LTR */
}
[dir="rtl"] .quickedit-toolbar-label .field:after {
  content: ' ← ';
}

/* The toolbar; these are not necessarily visible. */
.quickedit-toolbar {
  font-family: 'Droid sans', 'Lucida Grande', sans-serif;
}
.quickedit-toolbar-entity {
  padding: 0.1667em 0.2em;
}

 /**
  * Info toolgroup.
  */
.quickedit-toolbar-fullwidth {
  width: 100%;
}
.quickedit-toolgroup.wysiwyg-floated {
  float: right; /* LTR */
}
[dir="rtl"] .quickedit-toolgroup.wysiwyg-floated {
  float: left;
}
.quickedit-toolgroup.wysiwyg-main {
  clear: both;
  width: 100%;
  padding-left: 0; /* LTR */
}
[dir="rtl"] .quickedit-toolgroup.wysiwyg-main {
  padding-left: 0;
  padding-right: 0;
}

/**
 * Buttons.
 */
.quickedit-button {
  background-color: #e4e4e4;
  border: 1px solid #d2d2d2;
  color: #5a5a5a;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  opacity: 1;
  padding: 0.345em;
  -webkit-transition: opacity .1s ease;
  transition: opacity .1s ease;
}
.quickedit-button[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}
.quickedit-button + .quickedit-button {
  margin-left: 0.2em; /* LTR */
}
[dir="rtl"] .quickedit-button + .quickedit-button {
  margin-left: auto;
  margin-right: 0.25em;
}
/* Button with icons. */
.quickedit-button:hover,
.quickedit-button:active {
  background-color: #c8c8c8;
  border: 1px solid #a0a0a0;
  color: #2e2e2e;
}
.quickedit-toolbar-container .quickedit-button.action-cancel {
  background-color: transparent;
  border: 1px solid transparent;
}
.quickedit-button.action-save {
  color: white;
  background-color: #50a0e9;
  background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
  background-image:    -moz-linear-gradient(top, #50a0e9, #4481dc);
  background-image:      -o-linear-gradient(top, #50a0e9, #4481dc);
  background-image:   linear-gradient(to bottom, #50a0e9, #4481dc);
  border: 1px solid transparent;
}
.quickedit-button.action-save:hover,
.quickedit-button.action-save:active {
  border: 1px solid #a0a0a0;
}
.quickedit-button.action-saving,
.quickedit-button.action-saving:hover,
.quickedit-button.action-saving:active {
  background-color: #e4e4e4;
  background-image: none;
  border-color: #d2d2d2;
  color: #5a5a5a;
}

/**
 * Modal.
 */
#quickedit_modal {
  background-color: white;
  border: 1px solid #0199ff;
  box-shadow: 3px 3px 5px #333;
  font-family: 'Droid sans', 'Lucida Grande', sans-serif;
}
#quickedit_modal .main {
  font-size: 130%;
  margin: 25px;
  padding-left: 40px; /* LTR */
  background: transparent url('../images/attention.png') no-repeat;
}
[dir="rtl"] #quickedit_modal .main {
  padding-left: 0;
  padding-right: 40px;
}
#quickedit_modal .actions {
  border-top: 1px solid #ddd;
  padding: 0.25em 0.2em;
  text-align: right; /* LTR */
  background: #f5f5f5;
}
[dir="rtl"] #quickedit_modal .actions {
  text-align: left;
}