- reformat css to match the rest

Author: TobiasMue91

index.html

@@ -109,79 +109,19 @@
         .filter-item:hover {background:var(--gray);}
         .filter-item.active {background:var(--primary); color:white;}
         .clear-search {position:absolute; right:2.5rem; top:50%; transform:translateY(-50%); color:#6c757d; cursor:pointer; font-size:0.8rem; display:none;}
-
-        /* Skeleton loader styles */
-        .skeleton {
-            background: linear-gradient(90deg, var(--card) 0%, var(--gray) 50%, var(--card) 100%);
-            background-size: 200% 100%;
-            animation: skeleton-loading 1.5s infinite;
-            border-radius: var(--radius);
-        }
-
-        @keyframes skeleton-loading {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
-        }
-
-        .skeleton-card {
-            background: var(--card);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            overflow: hidden;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .skeleton-img {
-            width: 100%;
-            aspect-ratio: 16/10;
-        }
-
-        .skeleton-title {
-            height: 20px;
-            width: 80%;
-            margin: 1rem 1rem 0.5rem 1rem;
-        }
-
-        .skeleton-desc {
-            height: 12px;
-            width: 90%;
-            margin: 0.5rem 1rem;
-        }
-
-        .skeleton-desc-short {
-            width: 60%;
-        }
-
-        .skeleton-btn {
-            height: 36px;
-            width: 100px;
-            margin: auto 1rem 1rem 1rem;
-        }
-
-        .skeleton-stat-card {
-            background: var(--card);
-            border-radius: var(--radius);
-            padding: 1rem;
-            box-shadow: var(--shadow);
-            min-width: 150px;
-            text-align: center;
-            flex-grow: 1;
-            max-width: 220px;
-        }
-
-        .skeleton-stat-number {
-            height: 28px;
-            width: 60%;
-            margin: 0 auto 0.5rem auto;
-        }
-
-        .skeleton-stat-label {
-            height: 16px;
-            width: 80%;
-            margin: 0 auto;
-        }
+        .skeleton { position: relative; background-color: var(--card); border-radius: var(--radius); overflow: hidden; }
+        .skeleton::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: skeleton-shimmer 1.5s infinite; }
+        @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
+        @media (prefers-color-scheme: dark) { .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); } }
+        .skeleton-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
+        .skeleton-img { width: 100%; aspect-ratio: 16/10; }
+        .skeleton-title { height: 20px; width: 80%; margin: 1rem 1rem 0.5rem 1rem; }
+        .skeleton-desc { height: 12px; width: 90%; margin: 0.5rem 1rem; }
+        .skeleton-desc-short { width: 60%; }
+        .skeleton-btn { height: 36px; width: 100px; margin: auto 1rem 1rem 1rem; }
+        .skeleton-stat-card { background: var(--card); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); min-width: 150px; text-align: center; flex-grow: 1; max-width: 220px; }
+        .skeleton-stat-number { height: 28px; width: 60%; margin: 0 auto 0.5rem auto; }
+        .skeleton-stat-label { height: 16px; width: 80%; margin: 0 auto; }
 
         @media (max-width:768px) {
             .header-content {flex-wrap:wrap; height:auto; padding:1rem;}