dashboard: glassmorphism cards, compact accent icon box, live search bar
- Tile cards: backdrop-filter blur(22px), rgba white bg, inset highlight - Hover: translateY(-5px) + brighter glass effect - Icon box: 68px compact rounded square with blue gradient accent - Added live search input with glass style (filters by service name) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+78
-14
@@ -837,29 +837,46 @@ button {
|
||||
color: #174768;
|
||||
}
|
||||
|
||||
/* Service tiles — clean white cards with depth */
|
||||
/* Service tiles — glassmorphism */
|
||||
.dashboard-page .tile {
|
||||
backdrop-filter: none !important;
|
||||
background: #ffffff !important;
|
||||
border: 1px solid rgba(185, 215, 238, 0.7) !important;
|
||||
backdrop-filter: blur(22px) saturate(160%) !important;
|
||||
-webkit-backdrop-filter: blur(22px) saturate(160%) !important;
|
||||
background: rgba(255, 255, 255, 0.22) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.42) !important;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(15, 64, 103, 0.06),
|
||||
0 6px 20px rgba(15, 64, 103, 0.09) !important;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
|
||||
0 4px 18px rgba(15, 64, 103, 0.14),
|
||||
0 1px 4px rgba(15, 64, 103, 0.07),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
|
||||
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
|
||||
color: #0c1e2f !important;
|
||||
}
|
||||
|
||||
.dashboard-page .tile-wrap:hover .tile {
|
||||
transform: translateY(-3px) !important;
|
||||
border-color: rgba(42, 130, 210, 0.45) !important;
|
||||
transform: translateY(-5px) !important;
|
||||
background: rgba(255, 255, 255, 0.34) !important;
|
||||
border-color: rgba(255, 255, 255, 0.68) !important;
|
||||
box-shadow:
|
||||
0 2px 6px rgba(15, 64, 103, 0.08),
|
||||
0 12px 32px rgba(15, 64, 103, 0.16) !important;
|
||||
0 12px 36px rgba(15, 64, 103, 0.2),
|
||||
0 3px 8px rgba(15, 64, 103, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
/* Icon box */
|
||||
/* Icon box — compact accent square */
|
||||
.dashboard-page .tile-icon-box {
|
||||
background: #f2f8fd !important;
|
||||
border-color: rgba(185, 215, 238, 0.65) !important;
|
||||
width: 68px !important;
|
||||
height: 68px !important;
|
||||
max-height: 68px !important;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
border-radius: 18px !important;
|
||||
background: linear-gradient(135deg, rgba(42,140,214,0.28) 0%, rgba(14,91,153,0.18) 100%) !important;
|
||||
border: 1.5px solid rgba(42,140,214,0.35) !important;
|
||||
box-shadow: 0 2px 10px rgba(42,140,214,0.18) !important;
|
||||
margin: 0 auto 0.85rem !important;
|
||||
}
|
||||
|
||||
.dashboard-page .tile-icon {
|
||||
width: 62% !important;
|
||||
height: 62% !important;
|
||||
}
|
||||
|
||||
/* Credentials block */
|
||||
@@ -888,6 +905,53 @@ button {
|
||||
color: rgba(15, 91, 148, 0.65) !important;
|
||||
}
|
||||
|
||||
/* Service name in glass card */
|
||||
.dashboard-page .tile h3 {
|
||||
font-size: 1rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: #0a1d2e !important;
|
||||
text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
|
||||
letter-spacing: 0.01em !important;
|
||||
}
|
||||
|
||||
/* Search bar */
|
||||
.svc-search-wrap {
|
||||
padding: 0.6rem 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.svc-search-wrap::before {
|
||||
content: ;
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 50%;
|
||||
transform: translateY(-25%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%235a8aaa stroke-width=2.2 stroke-linecap=round stroke-linejoin=round%3E%3Ccircle cx=11 cy=11 r=8/%3E%3Cpath d=M21 21l-4.35-4.35/%3E%3C/svg%3E) center/contain no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
.svc-search {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 12px;
|
||||
padding: 0.6rem 1rem 0.6rem 2.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: #0c1e2f;
|
||||
outline: none;
|
||||
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
box-shadow: 0 2px 8px rgba(15,64,103,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
.svc-search::placeholder { color: rgba(12,30,47,0.45); }
|
||||
.svc-search:focus {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border-color: rgba(42,140,214,0.55);
|
||||
box-shadow: 0 4px 16px rgba(15,64,103,0.14), 0 0 0 3px rgba(42,140,214,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
/* Suppress transitions on non-tile elements */
|
||||
.category-chip,
|
||||
.category-chip.active,
|
||||
|
||||
@@ -88,11 +88,14 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="svc-search-wrap">
|
||||
<input type="search" id="svc-search" class="svc-search" placeholder="Поиск сервиса..." autocomplete="off" />
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid service-grid">
|
||||
{% for service in services %}
|
||||
{% set svc_cats = service_categories.get(service.id, []) %}
|
||||
<div class="tile-wrap">
|
||||
<div class="tile-wrap" data-name="{{ service.name|lower }}">
|
||||
<a class="tile-link" href="/go/{{ service.slug }}" aria-label="{{ service.name }}"></a>
|
||||
<div class="tile">
|
||||
<div class="tile-icon-box">
|
||||
@@ -231,6 +234,17 @@
|
||||
if (loadingOverlay) loadingOverlay.style.display = 'none';
|
||||
});
|
||||
})();
|
||||
|
||||
(function () {
|
||||
const input = document.getElementById('svc-search');
|
||||
if (!input) return;
|
||||
input.addEventListener('input', function () {
|
||||
const q = this.value.trim().toLowerCase();
|
||||
document.querySelectorAll('.tile-wrap[data-name]').forEach(function (wrap) {
|
||||
wrap.style.display = (!q || wrap.dataset.name.includes(q)) ? '' : 'none';
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user