litecharms/shopadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 21 Wiki Activity

Started producer design
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Khwezi Mngoma
2026-05-18 19:19:26 +02:00
parent c2d6fd1b17
commit 51946a1388
8 changed files with 766 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ShopAdmin/Components/Pages/Notifications.razor.css
+40 -2
View File
@@ -1,4 +1,5 @@
/* ==========================================================================
/* ==========================================================================
1. WORKSPACE LAYOUT & LAYOUT ENGINE BOUNDS
========================================================================== */
@@ -685,4 +686,41 @@
to {
opacity: 1;
}
}
}
/* ==========================================================================
X. BROAD VIEWPORT TELEMETRY CANVASES (Circuit Matrix Backdrop)
========================================================================== */
.workspace-ambient-backdrop {
position: fixed; /* Securely locks backdrop layer behind all scroll surfaces */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
user-select: none;
/* PERCENT-ENCODED INLINE SVG CIRCUIT GRID ENGINE:
- Uses a highly diluted telemetry orange mix matching your #ff6b35 accent tags.
- Built out of interlocking data nodes, traces, and measurement crosshairs.
*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='rgba(255, 107, 53, 0.11)' stroke-width='1.2'%3E%3C!-- Core Element 1: Center Tech Microprocessor Node --%3E%3Crect x='70' y='70' width='40' height='40' rx='3' stroke-width='1.5'/%3E%3Ccircle cx='90' cy='90' r='10' stroke-dasharray='2 2'/%3E%3Ccircle cx='90' cy='90' r='3' fill='rgba(255, 107, 53, 0.05)'/%3E%3C!-- Core Element 2: Radiating Bus Traces %26 Corner Trunks --%3E%3Cpath d='M 90,70 L 90,40 L 70,40 M 90,110 L 90,140 L 110,140 M 70,90 L 40,90 L 40,110 M 110,90 L 140,90 L 140,70'/%3E%3Ccircle cx='70' cy='40' r='2.5' fill='rgba(255, 107, 53, 0.15)'/%3E%3Ccircle cx='110' cy='140' r='2.5' fill='rgba(255, 107, 53, 0.15)'/%3E%3Ccircle cx='40' cy='110' r='2.5' fill='rgba(255, 107, 53, 0.15)'/%3E%3Ccircle cx='140' cy='70' r='2.5' fill='rgba(255, 107, 53, 0.15)'/%3E%3C!-- Core Element 3: Peripheral Data Junctions (Interlocking Corners) --%3E%3Ccircle cx='0' cy='0' r='35' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='0' r='20' stroke-dasharray='4 3'/%3E%3Ccircle cx='180' cy='0' r='35' stroke-width='0.8'/%3E%3Ccircle cx='180' cy='0' r='20' stroke-dasharray='4 3'/%3E%3Ccircle cx='0' cy='180' r='35' stroke-width='0.8'/%3E%3Ccircle cx='0' cy='180' r='20' stroke-dasharray='4 3'/%3E%3Ccircle cx='180' cy='180' r='35' stroke-width='0.8'/%3E%3Ccircle cx='180' cy='180' r='20' stroke-dasharray='4 3'/%3E%3C!-- Target Scope Crosshairs --%3E%3Cpath d='M 0,90 L 15,90 M 180,90 L 165,90 M 90,0 L 90,15 M 90,180 L 90,165' stroke-width='0.8' opacity='0.7'/%3E%3Cpath d='M 25,25 L 35,25 M 25,25 L 25,35 M 155,25 L 145,25 M 155,25 L 155,35 M 25,155 L 35,155 M 25,155 L 25,145 M 155,155 L 145,155 M 155,155 L 155,145' stroke-width='0.9' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 180px 180px;
/* Radial Mask: Blends perfectly out into your dark layout edges while
keeping text components crisp and legible in the foreground */
mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.12) 15%, black 80%);
-webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.12) 15%, black 80%);
}
/* Deep contextual underglow to give your glassmorphism cards an illuminated orange edge */
.workspace-ambient-backdrop::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient( circle at 50% 45%, rgba(255, 107, 53, 0.04) 0%, rgba(0, 0, 0, 0) 75% );
}