123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- /**
- * @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: 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, 0px 0px 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, 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: 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;
- }
|