htmlembed.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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. :root {
  6. --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
  7. --ck-html-embed-source-height: 10em;
  8. --ck-html-embed-unfocused-outline-width: 1px;
  9. --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
  10. }
  11. /* The feature container. */
  12. .ck-widget.raw-html-embed {
  13. font-size: var(--ck-font-size-base);
  14. background-color: var(--ck-color-base-foreground);
  15. &:not(.ck-widget_selected):not(:hover) {
  16. outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border);
  17. }
  18. & .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before {
  19. margin-left: 50px;
  20. }
  21. /* ----- Emebed label in the upper left corner ----------------------------------------------- */
  22. &::before {
  23. content: attr(data-html-embed-label);
  24. top: calc(-1 * var(--ck-html-embed-unfocused-outline-width));
  25. left: var(--ck-spacing-standard);
  26. background: hsl(0deg 0% 60%);
  27. transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  28. padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);
  29. border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius);
  30. color: var(--ck-color-base-background);
  31. font-size: var(--ck-font-size-tiny);
  32. font-family: var(--ck-font-face);
  33. }
  34. @nest .ck.ck-editor__editable.ck-blurred &.ck-widget_selected::before {
  35. top: 0px;
  36. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  37. }
  38. @nest .ck.ck-editor__editable:not(.ck-blurred) &.ck-widget_selected::before {
  39. top: 0;
  40. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  41. background: var(--ck-color-focus-border);
  42. }
  43. @nest .ck.ck-editor__editable &:not(.ck-widget_selected):hover::before {
  44. top: 0px;
  45. padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  46. }
  47. /* ----- Emebed internals --------------------------------------------------------------------- */
  48. & .raw-html-embed__content-wrapper {
  49. padding: var(--ck-spacing-standard);
  50. }
  51. /* The switch mode button wrapper. */
  52. & .raw-html-embed__buttons-wrapper {
  53. top: var(--ck-spacing-standard);
  54. right: var(--ck-spacing-standard);
  55. & .ck-button.raw-html-embed__save-button {
  56. color: var(--ck-color-button-save);
  57. }
  58. & .ck-button.raw-html-embed__cancel-button {
  59. color: var(--ck-color-button-cancel);
  60. }
  61. & .ck-button:not(:first-child) {
  62. margin-top: var(--ck-spacing-small);
  63. }
  64. }
  65. /* The edit source element. */
  66. & .raw-html-embed__source {
  67. box-sizing: border-box;
  68. height: var(--ck-html-embed-source-height);
  69. width: var(--ck-html-embed-content-width);
  70. resize: none;
  71. min-width: 0;
  72. padding: var(--ck-spacing-standard);
  73. font-family: monospace;
  74. tab-size: 4;
  75. white-space: pre-wrap;
  76. font-size: var(--ck-font-size-base); /* Safari needs this. */
  77. &[disabled] {
  78. background: hsl(0deg 0% 97%);
  79. color: hsl(0deg 0% 56%);
  80. }
  81. }
  82. /* The preview data container. */
  83. & .raw-html-embed__preview {
  84. overflow: hidden;
  85. box-sizing: border-box;
  86. width: var(--ck-html-embed-content-width);
  87. min-height: var(--ck-html-embed-content-min-height);
  88. text-align: center;
  89. & > table {
  90. margin-left: auto;
  91. margin-right: auto;
  92. }
  93. /* Disable all mouse interaction as long as the editor is not read–only. */
  94. @nest .ck-editor__editable:not(.ck-read-only) & {
  95. pointer-events: none;
  96. }
  97. }
  98. }