AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve PDF viewer layout and styling

Browse Source 
Updated `.pdf-viewer-container` to vertically center content by changing `align-items` to `center`. Adjusted `.pdf-frame` dimensions to use dynamic height and width, added a maximum width, and centered text alignment. Introduced rounded corners to the gradient bar with a `border-radius`. Changed `.pdf-canvas` to `inline-block` display with `vertical-align: top`. Further refined `.pdf-frame` layout with slightly different height and width calculations.
This commit is contained in:
tekh
2026-06-05 11:47:05 +02:00
parent f1ebd47c77
commit 3539907054
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
View File

@@ -68,7 +68,7 @@
.pdf-viewer-container { .pdf-viewer-container {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
} }
@@ -82,8 +82,10 @@
overflow: auto; overflow: auto;
position: relative; position: relative;
padding: 2rem; padding: 2rem;
max-height: 100%; height: calc(100vh - 200px);
width: auto; width: 90%;
max-width: 1200px;
text-align: center;
} }
.pdf-frame::before { .pdf-frame::before {
@@ -95,12 +97,13 @@
height: 4px; height: 4px;
background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%); background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
z-index: 1; z-index: 1;
border-radius: 16px 16px 0 0;
} }
.pdf-canvas { .pdf-canvas {
display: block; display: inline-block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin: 0 auto; vertical-align: top;
} }
.error-container { .error-container {
@@ -142,6 +145,8 @@
.pdf-frame { .pdf-frame {
border-radius: 12px; border-radius: 12px;
padding: 1rem; padding: 1rem;
height: calc(100vh - 180px);
width: 95%;
} }
.envelope-action-bar { .envelope-action-bar {