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

Refine UI spacing and dimensions for compact layout

Browse Source 
Reduced gaps, padding, and margins across various elements to create a more compact and visually streamlined layout. Adjusted `min-height`, `border-radius`, and `box-shadow` properties for toolbars and buttons to improve consistency. Updated dimensions and font sizes for value boxes and icons to align with the refined design. Applied similar adjustments for resizing states to maintain uniformity.
This commit is contained in:
tekh
2026-09-30 15:58:51 +02:00
parent 95961a296f
commit 181f7f4dec
1 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
View File

@@ -86,22 +86,22 @@
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
gap: 0.75rem;
gap: 0.5rem;
align-items: center;
background: transparent;
}
.sender-image-toolbar__group {
min-height: 4.8rem;
min-height: 3.8rem;
background: #ffffff;
border: 1px solid #d6deef;
border-radius: 0.5rem;
padding: 0.6rem;
border-radius: 0.45rem;
padding: 0.38rem 0.48rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
gap: 0.2rem;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.sender-image-toolbar__group--nav {
@@ -114,15 +114,15 @@
.sender-image-toolbar__group--actions {
justify-content: center;
gap: 0.45rem;
padding-inline: 0.75rem;
gap: 0.32rem;
padding-inline: 0.55rem;
}
.sender-image-toolbar__icon-btn {
width: 2.5rem;
height: 2.5rem;
width: 2.1rem;
height: 2.1rem;
border: 0;
border-radius: 0.45rem;
border-radius: 0.4rem;
background: transparent;
color: #1f2a44;
display: inline-flex;
@@ -137,22 +137,27 @@
}
.sender-image-toolbar__icon-btn--caret {
width: 2.1rem;
width: 1.85rem;
}
.sender-image-toolbar__icon-btn svg {
width: 18px;
height: 18px;
}
.sender-image-toolbar__value-box {
min-width: 9rem;
height: 2.5rem;
min-width: 8.15rem;
height: 2.1rem;
border: 1px solid #d5dceb;
border-radius: 0.45rem;
border-radius: 0.4rem;
background: #f8fafc;
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0 0.8rem;
padding: 0 0.65rem;
color: #233252;
font-size: 1.1rem;
font-weight: 500;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
}
@@ -162,12 +167,12 @@
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-top: 6.2rem;
padding-top: 5.15rem;
}
.sender-image-editor__native-preview {
max-width: 980px;
margin: 6.2rem auto 1rem;
margin: 5.15rem auto 1rem;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 10px;
@@ -1274,23 +1279,25 @@ body.resizing {
grid-template-columns: 1fr;
width: calc(100% - 1rem);
top: 0.5rem;
gap: 0.4rem;
}
.sender-image-toolbar__group {
min-height: 3.9rem;
min-height: 3.4rem;
}
.sender-image-editor__pages {
padding-top: 12.2rem;
padding-top: 10.5rem;
}
.sender-image-editor__native-preview {
margin-top: 12.2rem;
margin-top: 10.5rem;
}
.sender-image-toolbar__value-box {
min-width: 7.5rem;
font-size: 1rem;
min-width: 6.9rem;
height: 1.95rem;
font-size: 0.68rem;
}
.pdf-thumbnails {