1.dmn-literal-expression-container {
2  --decision-properties-background-color: var(--color-white);
3  --decision-properties-border-color: var(--color-grey-225-10-15);
4  --decision-properties-color: var(--color-grey-225-10-15);
5  --literal-expression-color: var(--color-grey-225-10-15);
6  --literal-expression-properties-border-color: var(--color-grey-225-10-15);
7  --literal-expression-properties-color: var(--color-grey-225-10-15);
8  --powered-by-overlay-background-color: var(--color-black-opacity-20);
9  --powered-by-overlay-content-background-color: var(--color-white);
10  --powered-by-overlay-content-border-color: var(--color-grey-225-10-75);
11  --powered-by-overlay-content-color: var(--color-grey-225-10-15);
12  --textarea-border-color: var(--color-grey-225-10-15);
13  --textarea-color: var(--color-grey-225-10-15);
14  --view-drd-button-background-color: var(--color-white);
15  --view-drd-button-border-color: var(--color-grey-225-10-75);
16  --view-drd-button-color: var(--color-grey-225-10-15);
17  --view-drd-button-hover-background-color: var(--color-grey-225-10-97);
18  --literal-expression-font-family: 'Arial', sans-serif;
19  --literal-expression-font-family-monospace: monospace;
20
21  font-family: var(--literal-expression-font-family);
22  position: relative;
23  color: var(--literal-expression-color);
24  width: 100%;
25  height: 100%;
26
27  /* required to apply position: fixed correctly */
28  transform: translate(0);
29}
30
31.dmn-literal-expression-container .viewer-container {
32  width: 100%;
33  height: 100%;
34  overflow: auto;
35}
36
37.dmn-literal-expression-container * {
38  box-sizing: border-box;
39}
40
41/* decision properties */
42.dmn-literal-expression-container .decision-properties {
43  border: 1px solid var(--decision-properties-border-color);
44  border-bottom: none;
45  padding: 10px;
46  padding-right: 75px;
47  color: var(--decision-properties-color);
48  background-color: var(--decision-properties-background-color);
49  position: relative;
50  min-width: 192px;
51}
52
53.dmn-literal-expression-container .decision-name {
54  margin: 0;
55  font-size: 21px;
56  font-weight: normal;
57  white-space: pre;
58}
59
60.dmn-literal-expression-container .decision-name:not(.editor) {
61  cursor: default;
62}
63
64.dmn-literal-expression-container .decision-name.editor {
65  cursor: text;
66}
67
68.dmn-literal-expression-container .decision-name div {
69  outline: none;
70}
71
72.dmn-literal-expression-container .decision-name:not(.editable),
73.dmn-literal-expression-container .decision-name .content-editable {
74  text-overflow: ellipsis;
75  white-space: nowrap;
76  overflow: hidden;
77}
78
79.dmn-literal-expression-container .textarea .content,
80.dmn-literal-expression-container .textarea .content-editable {
81  padding: 12px;
82}
83
84.dmn-literal-expression-container .textarea .content-editable {
85  height: 100%;
86  box-sizing: border-box;
87}
88
89.dmn-literal-expression-container .decision-name.editor:not(.focussed):hover {
90  cursor: text;
91}
92
93.dmn-literal-expression-container .decision-name.focussed .content-editable {
94  text-overflow: unset;
95}
96
97/* textarea */
98.dmn-literal-expression-container .textarea {
99  box-sizing: border-box;
100  width: 100%;
101  font-family: var(--literal-expression-font-family-monospace);
102  border: 1px solid var(--textarea-border-color);
103  border-bottom-width: 1px;
104  white-space: pre;
105  font-size: 14px;
106  color: var(--textarea-color);
107  height: 250px;
108  overflow: auto;
109}
110
111.dmn-literal-expression-container .textarea div:focus {
112  outline: none;
113}
114
115.dmn-literal-expression-container .textarea.editor {
116  cursor: text;
117}
118
119.dmn-literal-expression-container .textarea:not(.editor) {
120  cursor: default;
121}
122
123/* literal expression properties */
124.dmn-literal-expression-container .literal-expression-properties {
125  box-sizing: border-box;
126  width: 100%;
127  padding: 0;
128  border: 1px solid var(--literal-expression-properties-border-color);
129  border-top: none;
130  font-size: 14px;
131  color: var(--literal-expression-properties-color);
132}
133
134.dmn-literal-expression-container .literal-expression-properties table {
135  border-spacing: 8px;
136}
137
138.dmn-literal-expression-container .literal-expression-properties table tr td:first-child {
139  font-weight: bold;
140}
141
142.dmn-literal-expression-container .literal-expression-properties table tr td:last-child {
143  min-width: 100px;
144}
145
146.dmn-literal-expression-container .literal-expression-properties .variable-name-input {
147  width: 100%;
148}
149
150/* view drd */
151.dmn-literal-expression-container .view-drd {
152  margin-right: 10px;
153  padding-bottom: 10px;
154}
155
156.dmn-literal-expression-container .view-drd .view-drd-button {
157  background: var(--view-drd-button-background-color);
158  padding: 8px;
159  border: solid 1px var(--view-drd-button-border-color);
160  border-radius: 2px;
161  font-size: 14px;
162  color: var(--view-drd-button-color);
163  font-weight: bold;
164  cursor: pointer;
165  outline: none;
166}
167
168.dmn-literal-expression-container .view-drd .view-drd-button:hover {
169  background: var(--view-drd-button-hover-background-color);
170}
171
172/* powered by */
173
174.dmn-literal-expression-container .powered-by {
175  position: fixed;
176  bottom: 10px;
177  right: 10px;
178  z-index: 100;
179  display: flex;
180  flex-direction: row-reverse;
181  align-items: center;
182  padding: 5px;
183  background-color: var(--color-white);
184}
185
186.dmn-literal-expression-container .powered-by__logo {
187  z-index: 10;
188}
189
190.dmn-literal-expression-container .powered-by-overlay {
191  position: fixed;
192  top: 0;
193  right: 0;
194  bottom: 0;
195  left: 0;
196  background: var(--powered-by-overlay-background-color);
197  display: flex;
198  justify-content: center;
199  align-items: center;
200  z-index: 10;
201}
202
203.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content {
204  display: flex;
205  flex-direction: row;
206  align-items: center;
207  padding: 10px;
208  max-width: 260px;
209  background: var(--powered-by-overlay-content-background-color);
210  color: var(--powered-by-overlay-content-color);
211  border: solid 1px var(--powered-by-overlay-content-border-color);
212  border-radius: 2px;
213  font-size: 14px;
214}
215
216.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content .logo {
217  margin: 15px 20px 15px 10px;
218}
219