components/model-tree/model-tree.component.scss

0001 .model-tree {
0002   font-size: 13px;
0003   padding: 4px 0;
0004   user-select: none;
0005 }
0006
0007 .selection-bar {
0008   display: flex;
0009   align-items: center;
0010   gap: 4px;
0011   padding: 4px 8px;
0012   border-bottom: 1px solid rgba(128, 128, 128, 0.3);
0013 }
0014
0015 .selection-label {
0016   overflow: hidden;
0017   text-overflow: ellipsis;
0018   white-space: nowrap;
0019 }
0020
0021 .clear-selection {
0022   margin-left: auto;
0023   border: none;
0024   background: none;
0025   color: inherit;
0026   padding: 0;
0027   cursor: pointer;
0028   display: flex;
0029   align-items: center;
0030   opacity: 0.6;
0031
0032   &:hover {
0033     opacity: 1;
0034   }
0035
0036   mat-icon {
0037     font-size: 16px;
0038     width: 16px;
0039     height: 16px;
0040   }
0041 }
0042
0043 .empty-note {
0044   padding: 12px;
0045   opacity: 0.6;
0046 }
0047
0048 .piece-row {
0049   display: flex;
0050   align-items: center;
0051   gap: 4px;
0052   padding: 4px 8px;
0053   cursor: pointer;
0054
0055   &:hover {
0056     background: rgba(128, 128, 128, 0.15);
0057   }
0058 }
0059
0060 .expand-icon {
0061   font-size: 18px;
0062   width: 18px;
0063   height: 18px;
0064 }
0065
0066 .piece-name {
0067   font-weight: 600;
0068 }
0069
0070 .piece-meta {
0071   margin-left: auto;
0072   opacity: 0.6;
0073   font-size: 11px;
0074   white-space: nowrap;
0075 }
0076
0077 .visibility-toggle {
0078   border: none;
0079   background: none;
0080   color: inherit;
0081   padding: 0;
0082   cursor: pointer;
0083   display: flex;
0084   align-items: center;
0085   opacity: 0.6;
0086
0087   &:hover {
0088     opacity: 1;
0089   }
0090
0091   &.hidden-piece {
0092     opacity: 0.35;
0093   }
0094
0095   mat-icon {
0096     font-size: 16px;
0097     width: 16px;
0098     height: 16px;
0099   }
0100 }
0101
0102 .entity-row {
0103   display: flex;
0104   align-items: center;
0105   gap: 6px;
0106   padding: 2px 8px 2px 34px;
0107   cursor: pointer;
0108
0109   &:hover {
0110     background: rgba(128, 128, 128, 0.15);
0111   }
0112
0113   &.selected {
0114     background: rgba(75, 172, 132, 0.25);
0115   }
0116 }
0117
0118 .entity-label {
0119   overflow: hidden;
0120   text-overflow: ellipsis;
0121   white-space: nowrap;
0122 }
0123
0124 .ref-link {
0125   border: none;
0126   background: rgba(75, 172, 132, 0.15);
0127   color: inherit;
0128   border-radius: 8px;
0129   font-size: 11px;
0130   padding: 1px 8px;
0131   cursor: pointer;
0132
0133   &:hover {
0134     background: rgba(75, 172, 132, 0.4);
0135   }
0136 }
0137
0138 .more-button {
0139   display: block;
0140   border: none;
0141   background: none;
0142   color: inherit;
0143   opacity: 0.7;
0144   padding: 3px 8px 3px 34px;
0145   cursor: pointer;
0146   font-size: 12px;
0147
0148   &:hover {
0149     opacity: 1;
0150   }
0151 }
0152
0153 .piece-row.selected {
0154   background: rgba(75, 172, 132, 0.15);
0155 }