1.djs-parent { 2 --bjsl-color-info: var(--color-blue-205-100-45); 3 --bjsl-color-warning: #f7c71a; 4 --bjsl-color-error: var(--color-red-360-100-40); 5 --bjsl-color-success: #52b415; 6 7 --bjsl-font-color: var(--color-grey-225-10-15); 8 --bjsl-font-family: 'Arial', sans-serif; 9 --bjsl-font-size: 13px; 10} 11 12.bjsl-overlay { 13 z-index: 500; 14} 15 16.bjsl-overlay * { 17 box-sizing: border-box; 18} 19 20.bjsl-overlay:hover { 21 z-index: 1000; 22} 23 24.bjsl-dropdown { 25 display: none; 26} 27 28.bjsl-overlay:hover .bjsl-dropdown, 29.bjsl-dropdown.open { 30 display: block; 31} 32 33.bjsl-issues { 34 padding: 8px; 35 color: var(--bjsl-font-color); 36 font-family: var(--bjsl-font-family); 37 font-size: var(--bjsl-font-size); 38 background: var(--color-grey-225-10-97); 39 border: solid 1px var(--color-grey-225-10-75); 40 border-radius: 2px; 41} 42 43.bjsl-icon { 44 --icon-color: white; 45 background: var(--icon-bg-color); 46 color: var(--icon-color); 47 border-radius: 100%; 48 height: 20px; 49 width: 20px; 50 padding: 5px; 51 display: flex; 52 align-items: center; 53 justify-content: center; 54} 55 56.bjsl-icon svg { 57 width: 100%; 58 height: 100%; 59} 60 61.bjsl-icon-error { 62 --icon-bg-color: var(--bjsl-color-error); 63} 64 65.bjsl-icon-warning { 66 --icon-bg-color: var(--bjsl-color-warning); 67} 68 69.bjsl-icon-info { 70 --icon-bg-color: var(--bjsl-color-info); 71} 72 73.bjsl-overlay { 74 position: relative; 75} 76 77.bjsl-issues-top-right .bjsl-dropdown, 78.bjsl-issues-bottom-right .bjsl-dropdown-content { 79 top: 0; 80 left: 0; 81} 82 83.bjsl-issues-bottom-right .bjsl-dropdown, 84.bjsl-issues-top-right .bjsl-dropdown-content { 85 bottom: 0; 86 left: 0; 87} 88 89.bjsl-issues-top-right .bjsl-dropdown-content { 90 padding-bottom: 5px; 91} 92 93.bjsl-issues-bottom-right .bjsl-dropdown-content { 94 padding-top: 5px; 95} 96 97.bjsl-dropdown-content { 98 min-width: 260px; 99 position: absolute; 100} 101 102.bjsl-dropdown { 103 position: absolute; 104} 105 106.bjsl-issues { 107 list-style: none; 108 margin: 0; 109} 110 111.bjsl-issues ul { 112 list-style: none; 113 margin: 0; 114 padding: 0; 115} 116 117.bjsl-issues li { 118 display: flex; 119 flex-direction: row; 120 white-space: nowrap; 121} 122 123.bjsl-issues .icon { 124 width: 1em; 125 height: 1em; 126 margin-top: 1px; 127} 128 129.bjsl-issues li + li { 130 margin-top: .5rem; 131} 132 133.bjsl-issues .icon { 134 --icon-color: var(--bjsl-font-color); 135 136 color: var(--icon-color); 137} 138 139.bjsl-issues .error .icon { 140 --icon-color: var(--bjsl-color-error); 141} 142 143.bjsl-issues .warning .icon { 144 --icon-color: var(--bjsl-color-warning); 145} 146 147.bjsl-issues .info .icon { 148 --icon-color: var(--bjsl-color-info); 149} 150 151.bjsl-issues .message { 152 color: var(--bjsl-font-color); 153 margin-left: .5em; 154 text-decoration: none; 155} 156 157.bjsl-issues .rule { 158 color: var(--bjsl-font-color); 159 margin-left: .5em; 160 font-family: monospace; 161} 162 163.bjsl-issues .bjsl-issue-heading { 164 margin-left: 0px; 165 font-weight: bold; 166 margin-bottom: 100px; 167} 168 169.bjsl-child-issues hr { 170 display: block; 171 height: 1px; 172 border: 0; 173 border-top: 1px solid #ccc; 174} 175 176.bjsl-child-issues ul { 177 margin-top: 7px; 178} 179 180.bjsl-issues a:hover { 181 text-decoration: none; 182} 183 184.bjsl-id-hint { 185 background-color: #bdbdbd; 186 padding: 1px; 187 padding-left: 5px; 188 padding-right: 5px; 189 font-weight: bold; 190 border-radius: 20px; 191} 192 193 194/** 195 * Summary button styles 196 */ 197 198.bjsl-button { 199 border-radius: 100px; 200 position: absolute; 201 bottom: 20px; 202 left: 50%; 203 transform: translate(-50%); 204 background-color: #fafafa; 205 padding: 5px 10px; 206 border: none; 207 color: #ddd; 208 display: flex; 209 outline: none; 210 font-weight: bold; 211 font-size: var(--bjsl-font-size); 212} 213 214.bjsl-button-inactive:hover { 215 color: #444; 216} 217 218.bjsl-button .icon { 219 margin-right: 10px; 220 margin-top: 1px; 221 width: .9em; 222 height: .9em; 223} 224 225.bjsl-button-success { 226 background-color: var(--bjsl-color-success); 227 color: white; 228} 229 230.bjsl-button-error { 231 background-color: var(--bjsl-color-error); 232 color: white; 233} 234 235.bjsl-button-warning { 236 background-color: var(--bjsl-color-warning); 237 color: white; 238}