Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize mobile layout, add animated counters, improve crane swing

Browse Source
This commit is contained in:
Satyam
2026-02-16 19:30:10 +05:30
parent ed79b266af
commit 35cbdeb33c
12 changed files with 573 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+75 -41
View File
@@ -28,7 +28,9 @@
--crane-fill-surface: rgba(0, 0, 0, 0.04);
}
html, body, #root {
html,
body,
#root {
height: 100%;
margin: 0;
padding: 0;
@@ -69,8 +71,13 @@
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInBottom {
@@ -78,6 +85,7 @@
transform: translateY(1rem);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
@@ -89,12 +97,16 @@
-ms-overflow-style: none;
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}
@layer utilities {
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
@@ -121,14 +133,17 @@
border-radius: 3px;
opacity: 0.7;
}
.permit-stamp--accent {
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.4);
}
.permit-stamp--verified {
color: #10b981;
border-color: rgba(16, 185, 129, 0.4);
}
.permit-stamp--danger {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.4);
@@ -141,19 +156,20 @@
width: 100%;
height: 20px;
background:
linear-gradient(135deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%);
linear-gradient(135deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%),
linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%);
background-size: 48px 20px;
background-color: transparent;
}
.dark .shingle-divider {
background:
linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%),
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%);
linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%);
background-size: 48px 20px;
}
}
@@ -161,13 +177,11 @@
/* Safety stripe — diagonal hazard pattern for urgent/warning elements */
@layer components {
.safety-stripe {
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba(245, 158, 11, 0.12) 4px,
rgba(245, 158, 11, 0.12) 8px
);
background: repeating-linear-gradient(-45deg,
transparent,
transparent 4px,
rgba(245, 158, 11, 0.12) 4px,
rgba(245, 158, 11, 0.12) 8px);
}
}
@@ -175,17 +189,19 @@
@layer components {
.measure-ticks {
background-image:
repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px);
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0px, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 6px);
background-size: 100% 100%, 100% 50%;
background-repeat: no-repeat;
background-position: bottom, bottom;
}
.dark .measure-ticks {
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 6px);
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
}
.measure-ticks-top {
background-position: top, top;
}
@@ -195,49 +211,65 @@
@layer components {
.blueprint-grid {
background-image:
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 48px 48px;
}
.dark .blueprint-grid {
background-image:
linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
}
.blueprint-grid-fine {
background-image:
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 12px 12px, 12px 12px, 48px 48px, 48px 48px;
}
.dark .blueprint-grid-fine {
background-image:
linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px),
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
}
}
/* Mobile bottom sheet slide-up for Intelligence Map */
@keyframes slideUpSheet {
from { transform: translateY(100%); }
to { transform: translateY(0); }
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* Crane swing — gentle pendulum sway for suspended CTA card */
@keyframes craneSwing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1.5deg); }
75% { transform: rotate(-1.5deg); }
0%,
100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}
@layer components {
.crane-swing {
animation: craneSwing 4s ease-in-out infinite;
transform-origin: top center;
}
.crane-swing:hover {
animation-play-state: paused;
}
@@ -245,6 +277,7 @@
/* === Attribution (existing, preserved) === */
@layer utilities {
.attribution-ghost,
.content-ref-x7,
.sys-ref-x7,
@@ -270,8 +303,9 @@
background: transparent;
user-select: text;
}
.attribution-reveal::selection {
background: #3b82f6;
color: white;
}
}
}