diff --git a/elevenfeat/elevenfeat.libraries.yml b/elevenfeat/elevenfeat.libraries.yml index f8f8e80..311c5f8 100644 --- a/elevenfeat/elevenfeat.libraries.yml +++ b/elevenfeat/elevenfeat.libraries.yml @@ -42,7 +42,7 @@ feat.outside_in: feat.quickedit: css: - module: + component: templates/quickedit/quickedit.module.css: {} theme: templates/quickedit/quickedit.css: {} diff --git a/elevenfeat/templates/contextual/contextual.css b/elevenfeat/templates/contextual/contextual.css index 0ce0919..3f6a32b 100644 --- a/elevenfeat/templates/contextual/contextual.css +++ b/elevenfeat/templates/contextual/contextual.css @@ -1,7 +1,7 @@ /* debug */ -.contextual .contextual-links[hidden] { +/*.contextual .contextual-links[hidden] { display: block !important; -} +}*/ .contextual { position: absolute; diff --git a/elevenfeat/templates/quickedit/quickedit.css b/elevenfeat/templates/quickedit/quickedit.css index a41f779..8a77a4c 100644 --- a/elevenfeat/templates/quickedit/quickedit.css +++ b/elevenfeat/templates/quickedit/quickedit.css @@ -15,9 +15,8 @@ Lets start by resetting what can come out from the frontend theme /* Quickedit */ - .quickedit-form { - background-color: var(--white-90); + background-color: var(--black-80); width: 100%; padding: 0.5rem; color: var(--gravel-light); @@ -26,10 +25,6 @@ Quickedit border: 1px solid var(--asphalt); } -/*this field can be edited*/ -.quickedit-field {} - -/*.quickedit-candidate shows all the elements that can be edited*/ .quickedit-candidate { background-color: var(--bluesky-light-20); border-bottom: 1px solid var(--bluesky-light); @@ -49,46 +44,22 @@ Quickedit /* indicator of the elements that we can quick edit*/ .quickedit-field { - border: 1px solid transparent; - background: linear-gradient(white, white) padding-box, - repeating-linear-gradient(-45deg, #333 0, #333 25%, white 0, white 50%) 0 / 0.5rem 0.5rem; + outline: 1px dashed var(--bluesky); + /*border: 1px solid transparent;*/ + /*background: linear-gradient(white, white) padding-box, + repeating-linear-gradient(-45deg, red 0, Gainsboro 25%, Gainsboro 0, white 50%) 0 / 0.5rem 0.5rem;*/ } .quickedit-field:hover{ - animation: thisIsHowYouGetAnts 50s linear infinite; + /*animation: thisIsHowYouGetAnts 50s linear infinite;*/ + background-color: var(--bluesky-light-light-light) } -/*.quickedit-candidate { - border: 1px solid transparent; - background: linear-gradient(white, white) padding-box, - repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / 0.5rem 0.5rem; - animation: thisIsHowYouGetAnts 50s linear infinite; - -}*/ -@keyframes thisIsHowYouGetAnts { +/*@keyframes thisIsHowYouGetAnts { to { background-position: 100%; } } - - - -.quickedit-editable { } -.quickedit-entity-active:focus a{ } -a:hover .quickedit-editable{ } -.quickedit-editing{ } - - -.quickedit-editable:focus{ -} -.quickedit-highlighted{ -} -.quickedit-changed { -} -.quickedit-validation-error { - -} -.quickedit-editing.quickedit-editor-is-popup { - -} -.quickedit-form .form-item .error { - +*/ +.quickedit-highlighted { + color: var(--bluesky); + background-color: var(--bluesky-light) } diff --git a/elevenfeat/templates/quickedit/quickedit.module.css b/elevenfeat/templates/quickedit/quickedit.module.css index b15f957..c968873 100644 --- a/elevenfeat/templates/quickedit/quickedit.module.css +++ b/elevenfeat/templates/quickedit/quickedit.module.css @@ -10,21 +10,10 @@ original: core/modules/quickedit/css/quickedit.module.css position: relative; cursor: pointer; } - -/** - * Highlighted (hovered) editable. - */ .quickedit-editable.quickedit-highlighted { z-index: 99; } -.quickedit-validation-errors > .messages { -} -.quickedit-validation-errors > .messages > ul { -} -/** - * In-place editors that don't use a popup. - */ .quickedit-validation-errors { z-index: 300; position: relative; @@ -33,10 +22,6 @@ original: core/modules/quickedit/css/quickedit.module.css position: absolute; } -/** - * Styling specific to the 'form' in-place editor. - */ - #quickedit_backstage { display: none; } @@ -51,15 +36,9 @@ original: core/modules/quickedit/css/quickedit.module.css /** * Default form styling overrides. */ -.quickedit-form .form-wrapper .form-wrapper { - /*margin: inherit;*/ -} .quickedit-form .form-actions { display: none; } -.quickedit-form input { - /*max-width: 100%;*/ -} /** * Entity toolbar. diff --git a/elevenfeat/templates/quickedit/quickedit.toolbar.css b/elevenfeat/templates/quickedit/quickedit.toolbar.css index 8164521..f4a0646 100644 --- a/elevenfeat/templates/quickedit/quickedit.toolbar.css +++ b/elevenfeat/templates/quickedit/quickedit.toolbar.css @@ -6,13 +6,17 @@ /*right: auto !important;*/ /*left: 10% !important*/ } - +.quickedit-toolbar-pointer { + margin-left: -5rem +} .quickedit-toolbar-content { - background-color: var(--black-80); - padding: 0.5rem; + background-color: var(--white-80); + border: 1px solid var(--gravel); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 16px; color: var(--white); + min-width: 40rem; + } /* Save + Close */ @@ -21,7 +25,7 @@ /* Label name hide that we dont need it */ .quickedit-toolbar-label { - display: none; + /*display: none;*/ } .quickedit-toolbar-label .field { } @@ -32,7 +36,7 @@ Buttons .quickedit-button{ border: none; border-radius: 0; - height: 2rem; + height: 1rem; text-shadow: none; width: 1rem; height: 1rem;