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-35: hsl(205 100% 35%); 13 --color-blue-205-100-45: hsl(205 100% 45%); 14 --color-blue-205-100-45-opacity-30: hsl(205 100% 45% / 30%); 15 --color-blue-205-100-50: hsl(205 100% 50%); 16 --color-blue-205-100-80: hsl(205 100% 80%); 17 --color-blue-205-100-95: hsl(205 100% 95%); 18 --color-green-150-86-44: hsl(150 86% 44%); 19 --color-red-360-100-35: hsl(360 100% 35%); 20 --color-red-360-100-45: hsl(360 100% 45%); 21 --color-red-360-100-92: hsl(360 100% 92%); 22 --color-red-360-100-97: hsl(360 100% 97%); 23 --color-white: hsl(0 0% 100%); 24 --color-black: hsl(0 0% 0%); 25 --color-black-opacity-10: hsl(0 0% 0% / 10%); 26 --color-black-opacity-20: hsl(0 0% 0% / 20%); 27 --hint-button-color: var(--color-blue-205-100-35); 28 --hint-invalid-color: var(--color-red-360-100-35); 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-35); 39 --select-option-selected-color: var(--color-blue-205-100-35); 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-validation-warning { 108 color: var(--hint-invalid-color); 109} 110 111h3.dms-heading { 112 font-size: 16px; 113} 114 115h4.dms-heading { 116 font-size: 14px; 117} 118 119.dms-input, 120.dms-select { 121 outline: none; 122 padding: 3px 6px; 123 border: 1px solid var(--input-border-color); 124 background: none; 125 font-size: 14px; 126 font-family: inherit; 127 color: var(--input-color); 128 min-height: 26px; 129} 130 131.dms-input { 132 min-height: 26px; 133 white-space: pre-wrap; 134} 135 136.dms-select { 137 height: 26px; 138} 139 140.dms-input-select .dms-input { 141 padding-right: 24px; 142} 143 144.dms-input:focus, 145.dms-select:focus { 146 border: solid 1px var(--input-focus-border-color); 147 box-shadow: 0 0 0 2px var(--input-focus-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset; 148} 149 150.dms-input.invalid, 151.dms-select.invalid { 152 border-color: var(--input-invalid-border-color); 153 color: var(--input-invalid-color); 154} 155 156.dms-select.invalid:focus, 157.dms-input.invalid:focus { 158 border: solid 1px var(--input-focus-invalid-border-color); 159 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; 160} 161 162.dms-validated-input.dms-block .dms-input, 163.dms-block { 164 display: block; 165 width: 100%; 166} 167 168.dms-script-input { 169 height: 150px; 170 white-space: pre-wrap; 171 overflow: auto; 172} 173 174.dms-input-select { 175 display: inline-block; 176 position: relative; 177 min-width: 128px; 178} 179 180.dms-input-select .dms-input-select-icon { 181 position: absolute; 182 right: 6px; 183 top: 50%; 184 transform: translateY(-50%); 185} 186 187.dms-input-select .options { 188 background: var(--select-options-background-color); 189} 190 191.dms-select-options { 192 position: absolute; 193 background-color: var(--select-options-background-color); 194 border: solid 1px var(--select-options-border-color); 195 border-radius: 2px; 196 font-size: 14px; 197 color: var(--select-options-color); 198 box-shadow: 1px 1px 1px 1px var(--select-options-box-shadow-color); 199 z-index: 20; 200 cursor: pointer; 201 overflow: auto; 202} 203 204.dms-select-options .option { 205 padding: 4px 9px; 206} 207 208.dms-select-options .option.active { 209 color: var(--select-option-selected-color); 210} 211 212.dms-select-options .option:focus, 213.dms-select-options .option:hover { 214 background-color: var(--select-option-hover-background-color); 215} 216 217.dmn-js-parent .content-editable.placeholder::before { 218 content: attr(data-placeholder); 219 position: absolute; 220 opacity: 0.5; 221} 222