Reworked admin style

templates/admin/media.html

@@ -9,7 +9,7 @@
 </div>
 
 <!-- Client filter -->
-<div style="margin-bottom:1rem;">
+<div class="filter-bar">
     <div class="select is-small">
         <select onchange="window.location.href='/admin/media?lang={{ lang.code() }}' + (this.value ? '&client_id=' + this.value : '')">
             <option value="">{{ t.media_all_clients }}</option>
@@ -21,7 +21,7 @@
 </div>
 
 {% if items.is_empty() %}
-    <p class="has-text-grey">{{ t.media_empty }}</p>
+    <p class="empty-state">{{ t.media_empty }}</p>
 {% else %}
     <div class="media-grid">
         {% for item in &items %}
@@ -46,13 +46,13 @@
                 <div class="media-meta">
                     <strong>{{ item.client_name }}</strong>
                     {% if let Some(d) = item.visit_date.as_deref() %}
-                        <span style="color:#999;">{{ d }}</span>
+                        <span class="feedback-date">{{ d }}</span>
                     {% endif %}
                 </div>
                 {% if let Some(cap) = item.media.caption.as_deref() %}
-                    <div style="font-size:0.82rem;color:#666;margin-top:0.2rem;">{{ cap }}</div>
+                    <div class="media-caption">{{ cap }}</div>
                 {% endif %}
-                <form method="post" action="/admin/media/{{ item.media.id.unwrap() }}/delete" onsubmit="return confirm('{{ t.media_delete_confirm }}');" style="margin-top:0.3rem;">
+                <form method="post" action="/admin/media/{{ item.media.id.unwrap() }}/delete" onsubmit="return confirm('{{ t.media_delete_confirm }}');" class="mt-2">
                     <button class="button is-small is-danger is-outlined btn-sm">{{ t.media_delete }}</button>
                 </form>
             </div>
@@ -74,69 +74,4 @@
     {% endif %}
 {% endif %}
 
-<style>
-    .media-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 0.75rem;
-    }
-    .media-card {
-        background: #fff;
-        border-radius: 10px;
-        border: 1px solid #eee;
-        overflow: hidden;
-    }
-    .media-card img {
-        width: 100%;
-        height: 160px;
-        object-fit: cover;
-        display: block;
-    }
-    .media-card .photo-thumb {
-        width: 100%;
-        height: 160px;
-    }
-    .media-card .video-thumb {
-        position: relative;
-        width: 100%;
-        height: 160px;
-        background: #111;
-    }
-    .media-card .video-play {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-size: 2.5rem;
-        line-height: 1;
-        text-shadow: 0 1px 5px #000;
-        pointer-events: none;
-    }
-    .media-info {
-        padding: 0.6rem 0.75rem;
-    }
-    .media-pagination {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 0.35rem;
-        margin-top: 1.25rem;
-    }
-    .media-meta {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 0.85rem;
-        color: #333;
-    }
-    @media (max-width: 480px) {
-        .media-grid {
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        }
-        .media-card img, .media-card .photo-thumb, .media-card .video-thumb {
-            height: 120px;
-        }
-    }
-</style>
 {% endblock %}