You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

combomarkdowneditor.css 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. .combo-markdown-editor {
  2. width: 100%;
  3. }
  4. .combo-markdown-editor markdown-toolbar {
  5. cursor: default;
  6. display: flex;
  7. align-items: center;
  8. padding-bottom: 10px;
  9. gap: .5rem;
  10. flex-wrap: wrap;
  11. }
  12. .combo-markdown-editor .markdown-toolbar-group {
  13. display: flex;
  14. }
  15. .combo-markdown-editor .markdown-toolbar-group:last-child {
  16. flex: 1;
  17. justify-content: flex-end;
  18. }
  19. .combo-markdown-editor .markdown-toolbar-button {
  20. border: none;
  21. background: none;
  22. user-select: none;
  23. padding: 5px;
  24. cursor: pointer;
  25. color: var(--color-text);
  26. }
  27. .combo-markdown-editor .markdown-toolbar-button:hover {
  28. color: var(--color-primary);
  29. }
  30. .ui.form .combo-markdown-editor textarea.markdown-text-editor,
  31. .combo-markdown-editor textarea.markdown-text-editor {
  32. display: block;
  33. width: 100%;
  34. min-height: 200px;
  35. max-height: calc(100vh - 200px);
  36. resize: vertical;
  37. }
  38. .combo-markdown-editor .CodeMirror-scroll {
  39. max-height: calc(100vh - 200px);
  40. }
  41. /* use the same styles as markup/content.css */
  42. .combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
  43. font-size: 2em;
  44. }
  45. .combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
  46. font-size: 1.5em;
  47. }
  48. .combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
  49. font-size: 1.25em;
  50. }
  51. .combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
  52. font-size: 1em;
  53. }
  54. .combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
  55. font-size: 0.875em;
  56. }
  57. .combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
  58. font-size: 0.85em;
  59. }
  60. text-expander {
  61. display: block;
  62. position: relative;
  63. }
  64. text-expander .suggestions {
  65. position: absolute;
  66. min-width: 180px;
  67. padding: 0;
  68. margin-top: 24px;
  69. list-style: none;
  70. background: var(--color-box-body);
  71. border-radius: 5px;
  72. border: 1px solid var(--color-secondary);
  73. box-shadow: 0 .5rem 1rem var(--color-shadow);
  74. }
  75. text-expander .suggestions li {
  76. display: flex;
  77. align-items: center;
  78. cursor: pointer;
  79. padding: 4px 8px;
  80. font-weight: var(--font-weight-medium);
  81. }
  82. text-expander .suggestions li + li {
  83. border-top: 1px solid var(--color-secondary-alpha-40);
  84. }
  85. text-expander .suggestions li:first-child {
  86. border-radius: 4px 4px 0 0;
  87. }
  88. text-expander .suggestions li:last-child {
  89. border-radius: 0 0 4px 4px;
  90. }
  91. text-expander .suggestions li:only-child {
  92. border-radius: 4px;
  93. }
  94. text-expander .suggestions li:hover {
  95. background: var(--color-hover);
  96. }
  97. text-expander .suggestions .fullname {
  98. font-weight: var(--font-weight-normal);
  99. margin-left: 4px;
  100. color: var(--color-text-light-1);
  101. }
  102. text-expander .suggestions li[aria-selected="true"],
  103. text-expander .suggestions li[aria-selected="true"] span {
  104. background: var(--color-primary);
  105. color: var(--color-primary-contrast);
  106. }
  107. text-expander .suggestions img {
  108. width: 24px;
  109. height: 24px;
  110. margin-right: 8px;
  111. }