/** * @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 0 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: 0.5em; } /** * Animations. */ .quickedit-animate-invisible { opacity: 0; } .quickedit-animate-default { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .quickedit-animate-slow { -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .quickedit-animate-delay-veryfast { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .quickedit-animate-delay-fast { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .quickedit-animate-disable-width { -webkit-transition: width 0s; transition: width 0s; } .quickedit-animate-only-visibility { -webkit-transition: opacity 0.2s ease; transition: opacity 0.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, 0.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: linear-gradient(to bottom, #fff, #e4e4e4); 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, 0 0 0 4px rgba(150, 150, 150, 0.5); display: block; height: 16px; left: 18px; /* LTR */ position: absolute; -webkit-transform: rotate(45deg); -ms-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, 0 3px 0 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 0.1s ease; transition: opacity 0.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: 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; }