image.css

Same filename in this branch
  1. 8.9.x core/themes/stable/css/image/editors/image.css
Same filename in other branches
  1. 7.x modules/image/image.css
  2. 9 core/themes/stable9/css/quickedit/editors/image.css
  3. 9 core/themes/stable/css/quickedit/editors/image.css
  4. 9 core/modules/ckeditor5/css/image.css
  5. 9 core/modules/quickedit/css/editors/image.css
  6. 10 core/modules/ckeditor5/css/image.css
  7. 11.x core/modules/ckeditor5/css/image.css

Functional styles for the Image module's in-place editor.

File

core/modules/image/css/editors/image.css

View source
  1. /**
  2. * @file
  3. * Functional styles for the Image module's in-place editor.
  4. */
  5. /**
  6. * A minimum width/height is required so that users can drag and drop files
  7. * onto small images.
  8. */
  9. .quickedit-image-element {
  10. min-width: 200px;
  11. min-height: 200px;
  12. }
  13. .quickedit-image-dropzone {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. display: flex;
  18. flex-direction: column;
  19. align-items: center;
  20. justify-content: center;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. .quickedit-image-icon {
  25. display: block;
  26. width: 50px;
  27. height: 50px;
  28. background-repeat: no-repeat;
  29. background-size: cover;
  30. }
  31. .quickedit-image-field-info {
  32. display: flex;
  33. align-items: center;
  34. justify-content: flex-end;
  35. }
  36. .quickedit-image-text {
  37. display: block;
  38. }
  39. /**
  40. * If we do not prevent pointer-events for child elements, our drag+drop events
  41. * will not fire properly. This can lead to unintentional redirects if a file
  42. * is dropped on a child element when a user intended to upload it.
  43. */
  44. .quickedit-image-dropzone * {
  45. pointer-events: none;
  46. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.