Removed vulnerabilities
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
/* ==========================================================================
|
||||
Midrand Books — Glassine Architectural Veil & Ribbon Strip
|
||||
Midrand Books — Disconnect Overlay (Media Player Aesthetic)
|
||||
========================================================================== */
|
||||
|
||||
/* --- Native Dialog Element Layout Overrides --- */
|
||||
@@ -17,165 +17,151 @@
|
||||
background: transparent;
|
||||
z-index: 99999;
|
||||
overflow: hidden;
|
||||
/* Center the content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* Blazor handles visibility, but we handle the fade */
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Remove default browser modal backdrop blockout to allow custom layering below */
|
||||
#components-reconnect-modal::backdrop {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* --- Glassine Page Jacket Layer ---
|
||||
Frosted translucent shield that preserves context visibility while blocking mouse actions
|
||||
*/
|
||||
/* Show the modal smoothly when Blazor attaches state classes */
|
||||
#components-reconnect-modal.components-reconnect-show,
|
||||
#components-reconnect-modal.components-reconnect-failed,
|
||||
#components-reconnect-modal.components-reconnect-rejected {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- Dark Frosted Jacket Layer --- */
|
||||
.glassine-page-jacket {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(251, 251, 250, 0.4); /* Premium warm paper tint */
|
||||
backdrop-filter: blur(5px); /* Elegant frosted glass sweep */
|
||||
inset: 0;
|
||||
background-color: rgba(10, 25, 47, 0.4); /* Deep navy tint */
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
cursor: wait;
|
||||
animation: glassFadeIn 0.35s ease-out forwards;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes glassFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- The Sliding Ribbon Banner --- */
|
||||
.literary-sync-strip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||
padding: 1.1rem 2rem;
|
||||
box-sizing: border-box;
|
||||
/* --- Centered Content Wrapper --- */
|
||||
.reconnect-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
/* Animation kinematics: smooth physical drop slide */
|
||||
transform: translateY(-100%);
|
||||
animation: stripSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes stripSlideDown {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Ribbon Layout Matrix Grid --- */
|
||||
.strip-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
/* Left Node Ticker Elements & Animated Vector */
|
||||
.sync-status-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding-right: 2rem;
|
||||
gap: 1.5rem;
|
||||
color: #f8f9fa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.small-tracking {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: #111111;
|
||||
font-weight: 600;
|
||||
/* --- SVG Waveform Animation --- */
|
||||
.waveform-svg {
|
||||
shape-rendering: geometricPrecision;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Animated Book Helix SVG */
|
||||
.literary-helix-loader {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #111111;
|
||||
.bar {
|
||||
transform-origin: center;
|
||||
animation: wavePulse 1.2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.flipping-leaf-vector {
|
||||
transform-origin: 12px 12px;
|
||||
animation: svgLeafFlip 1.6s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
||||
.bar-1 {
|
||||
animation-delay: 0.0s;
|
||||
}
|
||||
|
||||
@keyframes svgLeafFlip {
|
||||
.bar-2 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.bar-3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.bar-4 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.bar-5 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes wavePulse {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleX(0);
|
||||
opacity: 0.3;
|
||||
transform: scaleY(0.3);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(-1);
|
||||
opacity: 0;
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Center Node Text Content */
|
||||
.sync-message-body {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 0.95rem;
|
||||
color: #333333;
|
||||
font-style: italic;
|
||||
/* Stop the waveform if the connection completely fails */
|
||||
#components-reconnect-modal.components-reconnect-failed .bar,
|
||||
#components-reconnect-modal.components-reconnect-rejected .bar,
|
||||
#components-reconnect-modal.components-reconnect-paused .bar {
|
||||
animation: none;
|
||||
transform: scaleY(0.1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* --- Typography --- */
|
||||
.small-tracking {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.15em;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.text-crimson {
|
||||
color: #A34843;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
color: #ff6b6b; /* Softened red for dark mode */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Right Node Fine-Press Button Trigger */
|
||||
.btn-strip-action {
|
||||
background: #111111;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #111111;
|
||||
padding: 0.45rem 1.25rem;
|
||||
/* --- Glass Buttons --- */
|
||||
.sync-action-node {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-glass-action {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #f8f9fa;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-strip-action:hover {
|
||||
background: transparent;
|
||||
color: #111111;
|
||||
.btn-glass-action:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-strip-action svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-strip-action:hover svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* --- Display Mechanics Matrix Controllers --- */
|
||||
/* --- Display Mechanics Matrix Controllers (Preserved) --- */
|
||||
.components-reconnect-first-attempt-visible,
|
||||
.components-reconnect-repeated-attempt-visible,
|
||||
.components-reconnect-failed-visible,
|
||||
@@ -192,27 +178,8 @@
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-failed .btn-strip-action,
|
||||
#components-reconnect-modal.components-reconnect-paused .btn-strip-action,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .btn-strip-action {
|
||||
#components-reconnect-modal.components-reconnect-failed .btn-glass-action,
|
||||
#components-reconnect-modal.components-reconnect-paused .btn-glass-action,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .btn-glass-action {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Tablet Parameters Response Collapse Matrix */
|
||||
@media (max-width: 768px) {
|
||||
.strip-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sync-status-indicator {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sync-action-node {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user