57 lines
1.2 KiB
CSS
57 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;
|
|||
|
|
}
|