TekH
f1ebd47c77
Moved inline styles from `EnvelopeViewer.razor` to a new external CSS file `envelope-viewer.css` for better maintainability and separation of concerns. Added external JavaScript dependencies (`pdf.js` and `pdf-viewer.js`) to enable PDF rendering. Fixed encoding issues in error messages and improved the layout structure with responsive design rules. Enhanced readability and usability by organizing styles and ensuring proper localization support.
172 lines
3.1 KiB
CSS
172 lines
3.1 KiB
CSS
.envelope-viewer-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
|
}
|
|
|
|
.envelope-action-bar {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 3px solid rgba(126, 34, 206, 0.3);
|
|
padding: 1.25rem 2rem;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.envelope-action-bar__inner {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.envelope-logo svg {
|
|
filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
|
|
color: #7e22ce;
|
|
}
|
|
|
|
.envelope-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.envelope-key {
|
|
font-size: 0.8125rem;
|
|
color: #64748b;
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
font-weight: 500;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.pdf-controls, .pdf-navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.zoom-level, .page-info {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
min-width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.envelope-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 1.5rem;
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pdf-viewer-container {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.pdf-frame {
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
overflow: auto;
|
|
position: relative;
|
|
padding: 2rem;
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
.pdf-frame::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.pdf-canvas {
|
|
display: block;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.error-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 12px;
|
|
border: none;
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.alert-danger {
|
|
background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
|
|
color: #be123c;
|
|
border-left: 4px solid #e11d48;
|
|
}
|
|
|
|
.alert-warning {
|
|
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
|
color: #92400e;
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
|
|
.spinner-border {
|
|
border-width: 0.35rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.envelope-content {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.pdf-frame {
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.envelope-action-bar {
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.envelope-action-bar__inner {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.envelope-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.envelope-key {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.envelope-logo svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.alert {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|