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