oppi.li
1.combo-markdown-editor {
2 width: 100%;
3}
4
5.combo-markdown-editor markdown-toolbar {
6 cursor: default;
7 display: flex;
8 align-items: center;
9 padding-bottom: 10px;
10 gap: .5rem;
11 flex-wrap: wrap;
12}
13
14.markdown-toolbar-switch {
15 display: flex;
16 height: 30px;
17}
18.markdown-toolbar-switch .switch .item {
19 padding: 0.25em 1em;
20}
21
22.markdown-toolbar-hidden .markdown-toolbar-button {
23 display: none;
24}
25
26.combo-markdown-editor .markdown-toolbar-group {
27 display: flex;
28}
29
30.combo-markdown-editor .markdown-toolbar-group:last-child {
31 flex: 1;
32 justify-content: flex-end;
33}
34
35.combo-markdown-editor .markdown-toolbar-button {
36 border: none;
37 background: none;
38 user-select: none;
39 padding: 5px;
40 cursor: pointer;
41 color: var(--color-text);
42 line-height: 20px;
43}
44
45.combo-markdown-editor .markdown-toolbar-button:hover {
46 color: var(--color-primary);
47}
48
49.ui.form .combo-markdown-editor textarea.markdown-text-editor,
50.combo-markdown-editor textarea.markdown-text-editor {
51 display: block;
52 width: 100%;
53 max-height: calc(100vh - var(--min-height-textarea));
54 resize: vertical;
55}
56
57.combo-markdown-editor .CodeMirror-scroll {
58 max-height: calc(100vh - var(--min-height-textarea));
59}
60
61/* use the same styles as markup/content.css */
62.combo-markdown-editor .CodeMirror-scroll .cm-header-1 {
63 font-size: 2em;
64}
65
66.combo-markdown-editor .CodeMirror-scroll .cm-header-2 {
67 font-size: 1.5em;
68}
69
70.combo-markdown-editor .CodeMirror-scroll .cm-header-3 {
71 font-size: 1.25em;
72}
73
74.combo-markdown-editor .CodeMirror-scroll .cm-header-4 {
75 font-size: 1em;
76}
77
78.combo-markdown-editor .CodeMirror-scroll .cm-header-5 {
79 font-size: 0.875em;
80}
81
82.combo-markdown-editor .CodeMirror-scroll .cm-header-6 {
83 font-size: 0.85em;
84}
85
86text-expander {
87 display: block;
88 position: relative;
89}
90
91text-expander .suggestions {
92 position: absolute;
93 min-width: 180px;
94 padding: 0;
95 margin-top: 24px;
96 list-style: none;
97 background: var(--color-box-body);
98 border-radius: var(--border-radius);
99 border: 1px solid var(--color-secondary);
100 box-shadow: 0 .5rem 1rem var(--color-shadow);
101 z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */
102}
103
104text-expander .suggestions li {
105 display: flex;
106 align-items: center;
107 cursor: pointer;
108 padding: 4px 8px;
109 font-weight: var(--font-weight-medium);
110}
111
112text-expander .suggestions li + li {
113 border-top: 1px solid var(--color-secondary-alpha-40);
114}
115
116text-expander .suggestions li:first-child {
117 border-radius: var(--border-radius) var(--border-radius) 0 0;
118}
119
120text-expander .suggestions li:last-child {
121 border-radius: 0 0 var(--border-radius) var(--border-radius);
122}
123
124text-expander .suggestions li:only-child {
125 border-radius: var(--border-radius);
126}
127
128text-expander .suggestions li:hover {
129 background: var(--color-hover);
130}
131
132text-expander .suggestions .fullname {
133 font-weight: var(--font-weight-normal);
134 margin-left: 4px;
135 color: var(--color-text-light-1);
136}
137
138text-expander .suggestions li[aria-selected="true"],
139text-expander .suggestions li[aria-selected="true"] span {
140 background: var(--color-primary);
141 color: var(--color-primary-contrast);
142}
143
144text-expander .suggestions img {
145 width: 24px;
146 height: 24px;
147 margin-right: 8px;
148}