1/* Color definitions */ 2.dmn-js-parent { 3 --color-grey-225-10-15: hsl(225, 10%, 15%); 4 --color-grey-225-10-35: hsl(225, 10%, 35%); 5 --color-grey-225-10-55: hsl(225, 10%, 55%); 6 --color-grey-225-10-75: hsl(225, 10%, 75%); 7 --color-grey-225-10-80: hsl(225, 10%, 80%); 8 --color-grey-225-10-85: hsl(225, 10%, 85%); 9 --color-grey-225-10-90: hsl(225, 10%, 90%); 10 --color-grey-225-10-95: hsl(225, 10%, 95%); 11 --color-grey-225-10-97: hsl(225, 10%, 97%); 12 --color-blue-205-100-45: hsl(205, 100%, 45%); 13 --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 14 --color-blue-205-100-50: hsl(205, 100%, 50%); 15 --color-blue-205-100-80: hsl(205, 100%, 80%); 16 --color-blue-205-100-95: hsl(205, 100%, 95%); 17 --color-green-150-86-44: hsl(150, 86%, 44%); 18 --color-red-360-100-40: hsl(360, 100%, 40%); 19 --color-red-360-100-45: hsl(360, 100%, 45%); 20 --color-red-360-100-92: hsl(360, 100%, 92%); 21 --color-red-360-100-97: hsl(360, 100%, 97%); 22 --color-white: hsl(0, 0%, 100%); 23 --color-black: hsl(0, 0%, 0%); 24 --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 25 --color-black-opacity-20: hsla(0, 0%, 0%, 20%); 26 --hint-button-color: var(--color-blue-205-100-50); 27 --hint-button-hover-color: var(--color-blue-205-100-45); 28 --hint-invalid-color: var(--color-red-360-100-45); 29 --separator-color: var(--color-grey-225-10-75); 30 --input-border-color: var(--color-grey-225-10-75); 31 --input-color: var(--color-grey-225-10-15); 32 --input-focus-border-color: var(--color-blue-205-100-50); 33 --input-focus-box-shadow-color: var(--color-blue-205-100-80); 34 --input-focus-box-shadow-inset-color: var(--color-grey-225-10-75); 35 --input-focus-invalid-border-color: var(--color-red-360-100-45); 36 --input-focus-invalid-box-shadow-color: var(--color-red-360-100-92); 37 --input-invalid-border-color: var(--color-red-360-100-45); 38 --input-invalid-color: var(--color-red-360-100-45); 39 --select-option-selected-color: var(--color-blue-205-100-45); 40 --select-option-hover-background-color: var(--color-black-opacity-10); 41 --select-options-background-color: var(--color-white); 42 --select-options-border-color: var(--color-grey-225-10-75); 43 --select-options-box-shadow-color: var(--color-black-opacity-10); 44 --select-options-color: var(--color-grey-225-10-15); 45} 46 47.dms-list-component .items { 48 margin: 0; 49 padding: 0; 50 list-style: none; 51 line-height: 1.7em; 52} 53 54.dms-list-component .items .item .remove { 55 float: right; 56} 57 58.dms-fill-row { 59 display: flex; 60 flex-direction: row; 61 align-items: center; 62} 63 64.dms-fill-row > * { 65 flex: 0 0 auto; 66} 67 68.dms-fill-row > :last-child { 69 flex: 1 1 auto; 70} 71 72.dms-label { 73 font-weight: bold; 74 white-space: nowrap; 75 margin-right: 5px; 76} 77 78.dms-hrule { 79 border: 0; 80 border-top: dotted 1px var(--separator-color); 81 margin: 10px auto; 82} 83 84.dms-heading { 85 margin: 12px 0 8px; 86 font-weight: bold; 87} 88 89.dms-hint { 90 font-size: 12px; 91 margin-top: 5px; 92 color: var(--hint-color); 93} 94 95.dms-hint button { 96 color: var(--hint-button-color); 97 text-decoration: none; 98 display: inline; 99 border: none; 100 padding: 0; 101 margin: 0; 102 cursor: pointer; 103 font: inherit; 104 background: none; 105} 106 107.dms-hint button:hover { 108 color: var(--hint-button-hover-color); 109} 110 111.dms-validation-warning { 112 color: var(--hint-invalid-color); 113} 114 115h3.dms-heading { 116 font-size: 16px; 117} 118 119h4.dms-heading { 120 font-size: 14px; 121} 122 123.dms-input, 124.dms-select { 125 outline: none; 126 padding: 3px 6px; 127 border: 1px solid var(--input-border-color); 128 background: none; 129 font-size: 14px; 130 font-family: inherit; 131 color: var(--input-color); 132 min-height: 26px; 133} 134 135.dms-input { 136 min-height: 26px; 137 white-space: pre-wrap; 138} 139 140.dms-select { 141 height: 26px; 142} 143 144.dms-input-select .dms-input { 145 padding-right: 24px; 146} 147 148.dms-input:focus, 149.dms-select:focus { 150 border: solid 1px var(--input-focus-border-color); 151 box-shadow: 0 0 0 2px var(--input-focus-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset; 152} 153 154.dms-input.invalid, 155.dms-select.invalid { 156 border-color: var(--input-invalid-border-color); 157 color: var(--input-invalid-color); 158} 159 160.dms-select.invalid:focus, 161.dms-input.invalid:focus { 162 border: solid 1px var(--input-focus-invalid-border-color); 163 box-shadow: 0 0 0 2px var(--input-focus-invalid-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset; 164} 165 166.dms-validated-input.dms-block .dms-input, 167.dms-block { 168 display: block; 169 width: 100%; 170} 171 172.dms-script-input { 173 height: 150px; 174 white-space: pre-wrap; 175 overflow: auto; 176} 177 178.dms-input-select { 179 display: inline-block; 180 position: relative; 181 min-width: 128px; 182} 183 184.dms-input-select .dms-input-select-icon { 185 position: absolute; 186 right: 6px; 187 top: 50%; 188 transform: translateY(-50%); 189} 190 191.dms-input-select .options { 192 background: var(--select-options-background-color); 193} 194 195.dms-select-options { 196 position: absolute; 197 background-color: var(--select-options-background-color); 198 border: solid 1px var(--select-options-border-color); 199 border-radius: 2px; 200 font-size: 14px; 201 color: var(--select-options-color); 202 box-shadow: 1px 1px 1px 1px var(--select-options-box-shadow-color); 203 z-index: 20; 204 cursor: pointer; 205 overflow: auto; 206} 207 208.dms-select-options .option { 209 padding: 4px 9px 4px 9px; 210} 211 212.dms-select-options .option.active { 213 color: var(--select-option-selected-color); 214} 215 216.dms-select-options .option:focus, 217.dms-select-options .option:hover { 218 background-color: var(--select-option-hover-background-color); 219} 220 221.dmn-js-parent .content-editable--with-placeholder::before { 222 content: attr(data-placeholder); 223 position: absolute; 224 opacity: 0.5; 225} 226