56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
/* ─── Image Usage Indicator ───────────────────────────────────────────────── */
|
||
|
||
/* Highlight used images with a subtle green border */
|
||
.k-item.sf-is-used {
|
||
border-right: 3px solid #3cba6f;
|
||
}
|
||
|
||
.k-item.sf-is-unused {
|
||
border-right: 3px solid #e8921e;
|
||
}
|
||
|
||
/* Ensure the image/icon container can hold the absolute badge */
|
||
.k-item .k-item-image,
|
||
.k-item .k-item-icon {
|
||
position: relative;
|
||
}
|
||
|
||
/* Badge dot common styles */
|
||
.sf-usage-dot {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
/*border: 1px solid rgba(255, 255, 255, 0.85);*/
|
||
font-size: 9px;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
/* Used: green with a checkmark */
|
||
.sf-usage-dot--used {
|
||
background-color: #3cba6f;
|
||
color: #fff;
|
||
}
|
||
.sf-usage-dot--used::before {
|
||
/*content: '✓';*/
|
||
}
|
||
|
||
/* Unused: orange with an em-dash */
|
||
.sf-usage-dot--unused {
|
||
background-color: #e8921e;
|
||
color: #fff;
|
||
}
|
||
.sf-usage-dot--unused::before {
|
||
/*content: '–';*/
|
||
font-size: 11px;
|
||
}
|