| .indent { |
| padding: 0; |
| margin: 7px 0 0 20px; |
| white-space: nowrap; |
| } |
| #expander { |
| width: 25px; |
| height: 25px; |
| } |
| #expander.notParent { |
| visibility: hidden; |
| /* example of alternative treatment of inactive widget |
| opacity: 0.4; |
| color: grey; */ |
| } |
| .item { |
| color: rgba(0, 0, 0, 0.870588); |
| box-sizing: border-box; |
| background-color: #fafafa; |
| height: 2.5em; |
| border-radius: 3px; |
| overflow: hidden; |
| box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); |
| border: solid 1px rgba(0, 0, 0, 0.12); |
| padding: 1px 5px 2px 3px; |
| } |
| .item:not(.highlight):hover { |
| opacity: 0.7; |
| } |
| .item.highlight { |
| background-color: rgb(255, 171, 64); |
| color: rgb(250, 250, 250); |
| } |
| /* how to add content to item on highlight |
| span.item.highlight::after { |
| content: " \0025B6"; |
| } */ |
