Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

easyimage.css 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /*
  2. Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. .easyimage, .cke_widget_wrapper_easyimage {
  6. background: transparent;
  7. border: none;
  8. outline: 0px;
  9. display: block;
  10. padding: 0;
  11. clear: both;
  12. }
  13. /*
  14. The outline is not a part of the element's dimensions. A border needs to be used as an outline to align the linked image with a caption.
  15. */
  16. .easyimage a > img {
  17. outline: none;
  18. border: 1px solid #0782C1;
  19. box-sizing: border-box;
  20. padding: 1px;
  21. }
  22. .cke_widget_wrapper_easyimage figure {
  23. margin: 0;
  24. }
  25. .easyimage img, .cke_widget_uploadeasyimage img {
  26. display: block;
  27. height: auto;
  28. margin: 0 auto;
  29. max-width: 100%;
  30. }
  31. .cke_widget_wrapper_easyimage-side, :not(.cke_widget_wrapper_easyimage):not(.cke_widget_wrapper_easyimage-side) > .easyimage-side,
  32. .cke_widget_wrapper_easyimage-align-right, :not(.cke_widget_wrapper_easyimage):not(.cke_widget_wrapper_easyimage-align-right) > .easyimage-align-right {
  33. /*
  34. The :not() selector will be used for Easy Image content ouside of the editor, for example: when the editor was destroyed.
  35. See https://github.com/ckeditor/ckeditor-dev/pull/1150#discussion_r150415261 for more details.
  36. */
  37. float: right;
  38. max-width: 50%;
  39. /*
  40. In case of placement inside the parent container like a table cell, 'min-width' is needed to prevent the widget from having
  41. tiny sizes. The `em` unit is used so it works well and has proper proportions to the textual content around (#1553).
  42. */
  43. min-width: 10em;
  44. margin-left: 1.5em;
  45. }
  46. /*
  47. Overwrite 'max-width: 50%' with 'max-width: 50vw' to prevent the native Chrome bug:
  48. https://bugs.chromium.org/p/chromium/issues/detail?id=803045 (#1550).
  49. */
  50. body.cke_editable > .cke_widget_wrapper_easyimage-side {
  51. max-width: 50vw;
  52. }
  53. .cke_widget_wrapper_easyimage-align-left, :not(.cke_widget_wrapper_easyimage):not(.cke_widget_wrapper_easyimage-align-left) > .easyimage-align-left {
  54. float: left;
  55. max-width: 50%;
  56. min-width: 10em;
  57. margin-right: 1.5em;
  58. }
  59. .cke_widget_wrapper_easyimage-align-center, :not(.cke_widget_wrapper_easyimage):not(.cke_widget_wrapper_easyimage-align-center) > .easyimage-align-center {
  60. margin: 0 auto;
  61. max-width: 90%;
  62. }
  63. .easyimage .cke_widget_editable {
  64. background-color: #f7f7f7;
  65. /* Add border so when caption is focused, blue border does not cause flickering. */
  66. border: 1px solid #f7f7f7;
  67. color: #333;
  68. padding: .8em;
  69. }
  70. .cke_widget_wrapper:hover .easyimage .cke_widget_editable {
  71. outline: 3px solid transparent;
  72. }
  73. .cke_widget_wrapper .easyimage .cke_widget_editable.cke_widget_editable_focused {
  74. background-color: #fff;
  75. border-color: #48a3f5;
  76. outline: none;
  77. }
  78. /* Loaders */
  79. .cke_widget_element.easyimage {
  80. position: relative;
  81. }
  82. .cke_loader {
  83. position: absolute;
  84. top: 0px;
  85. left: 0px;
  86. right: 0px;
  87. }
  88. .cke_loader .cke_bar {
  89. height: 10px;
  90. background: #6a9ed1;
  91. width: 0;
  92. }
  93. /* Fancy opacity effect discussed in #1533. Transition is assigned in this awkward way so that it **does not** happen for
  94. the initial render, otherwise it would start transitioning from opacity 1 to 0.x upon the first render. */
  95. .cke_widget_wrapper_easyimage:not(.cke_widget_wrapper_uploading) figure img {
  96. transition: opacity 0.3s ease-in-out;
  97. }
  98. .cke_widget_wrapper_easyimage.cke_widget_wrapper_uploading figure img {
  99. opacity: 0.75;
  100. }