intégration des contenus prémaquettes

site/plugins/image-usage-indicator/index.css

@@ -0,0 +1,56 @@
+/* ─── 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;
+}