8
0

imageresize.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. .ck-content .image.image_resized {
  6. max-width: 100%;
  7. /*
  8. The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
  9. See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
  10. Fortunately, since we control the width, there is no risk that the image will look bad.
  11. */
  12. display: block;
  13. box-sizing: border-box;
  14. & img {
  15. /* For resized images it is the `<figure>` element that determines the image width. */
  16. width: 100%;
  17. }
  18. & > figcaption {
  19. /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
  20. display: block;
  21. }
  22. }
  23. /* .ck-content .image .ck-widget__resizer {
  24. } */
  25. .ck-focused .ck-widget_with-resizer.ck-widget_selected.image > .ck-widget__resizer {
  26. display: none;
  27. }
  28. .ck-focused .ck-widget_with-resizer.ck-widget_selected.image.image_resizer_loaded > .ck-widget__resizer {
  29. display: block;
  30. }
  31. /* .ck-content .image.image_resizer_loaded .ck-widget__resizer {
  32. display: block;
  33. } */
  34. [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  35. margin-right: var(--ck-spacing-standard);
  36. }
  37. [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
  38. margin-left: var(--ck-spacing-standard);
  39. }
  40. .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
  41. width: 4em;
  42. }