1.bjs-container { 2 --bjs-font-family: Arial, sans-serif; 3 4 --color-grey-225-10-15: hsl(225, 10%, 15%); 5 --color-grey-225-10-35: hsl(225, 10%, 35%); 6 --color-grey-225-10-55: hsl(225, 10%, 55%); 7 --color-grey-225-10-75: hsl(225, 10%, 75%); 8 --color-grey-225-10-80: hsl(225, 10%, 80%); 9 --color-grey-225-10-85: hsl(225, 10%, 85%); 10 --color-grey-225-10-90: hsl(225, 10%, 90%); 11 --color-grey-225-10-95: hsl(225, 10%, 95%); 12 --color-grey-225-10-97: hsl(225, 10%, 97%); 13 14 --color-blue-205-100-45: hsl(205, 100%, 45%); 15 --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 16 --color-blue-205-100-50: hsl(205, 100%, 50%); 17 --color-blue-205-100-95: hsl(205, 100%, 95%); 18 19 --color-green-150-86-44: hsl(150, 86%, 44%); 20 21 --color-red-360-100-40: hsl(360, 100%, 40%); 22 --color-red-360-100-45: hsl(360, 100%, 45%); 23 --color-red-360-100-92: hsl(360, 100%, 92%); 24 --color-red-360-100-97: hsl(360, 100%, 97%); 25 26 --color-white: hsl(0, 0%, 100%); 27 --color-black: hsl(0, 0%, 0%); 28 --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 29 --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 30 31 --breadcrumbs-font-family: var(--bjs-font-family); 32 --breadcrumbs-item-color: var(--color-blue-205-100-50); 33 --breadcrumbs-arrow-color: var(--color-black); 34 --drilldown-fill-color: var(--color-white); 35 --drilldown-background-color: var(--color-blue-205-100-50); 36} 37 38.bjs-breadcrumbs { 39 position: absolute; 40 display: none; 41 flex-wrap: wrap; 42 align-items: center; 43 top: 30px; 44 left: 30px; 45 padding: 0px; 46 margin: 0px; 47 font-family: var(--breadcrumbs-font-family); 48 font-size: 16px; 49 line-height: normal; 50} 51 52.bjs-breadcrumbs-shown .bjs-breadcrumbs { 53 display: flex; 54} 55 56.djs-palette-shown .bjs-breadcrumbs { 57 left: 90px; 58} 59 60.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs { 61 left: 140px; 62} 63 64.bjs-breadcrumbs li { 65 display: inline-flex; 66 padding-bottom: 5px; 67 align-items: center; 68} 69 70.bjs-breadcrumbs li a { 71 cursor: pointer; 72 color: var(--breadcrumbs-item-color); 73} 74 75.bjs-breadcrumbs li:last-of-type a { 76 color: inherit; 77 cursor: default; 78} 79 80.bjs-breadcrumbs li:not(:first-child)::before { 81 content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>'); 82 padding: 0 8px; 83 color: var(--breadcrumbs-arrow-color); 84 height: 1em; 85} 86 87.bjs-breadcrumbs .bjs-crumb { 88 display: inline-block; 89 max-width: 200px; 90 overflow: hidden; 91 text-overflow: ellipsis; 92 white-space: nowrap; 93} 94 95.bjs-drilldown { 96 width: 20px; 97 height: 20px; 98 99 padding: 0px; 100 margin-left: -20px; 101 102 cursor: pointer; 103 border: none; 104 border-radius: 2px; 105 outline: none; 106 107 fill: var(--drilldown-fill-color); 108 background-color: var(--drilldown-background-color); 109} 110 111.bjs-drilldown-empty { 112 display: none; 113} 114 115.selected .bjs-drilldown-empty { 116 display: inherit; 117} 118 119[data-popup="align-elements"] .djs-popup-results { 120 display: flex; 121} 122 123[data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] { 124 border-left: 1px solid var(--popup-border-color); 125} 126 127[data-popup="align-elements"] [data-group="align"] { 128 display: grid; 129 grid-template-columns: repeat(3, 1fr); 130} 131 132[data-popup="align-elements"] .djs-popup-body .entry { 133 padding: 6px 8px; 134} 135 136[data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) { 137 margin-top: 0; 138} 139 140[data-popup="align-elements"] .djs-popup-entry-icon { 141 display: block; 142 margin: 0; 143 height: 20px; 144 width: 20px; 145} 146