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

feat: UI für die Dokumentenunterzeichnungsseite verbessert

Browse Source 
- Layout modernisiert und responsiver gestaltet.
- Button-Stile und Farbschemata aktualisiert.
- Verbesserte Ausrichtung von Text und Symbolen für mehr visuelle Klarheit.
- Fokus auf die Verbesserung der Benutzererfahrung beim Unterzeichnen von Dokumenten.
This commit is contained in:
Developer 02
2024-09-17 00:38:37 +02:00
parent a83994af43
commit 9ffeb7afe8
3 changed files with 137 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
EnvelopeGenerator.Web/wwwroot/css/site.css
View File

@@ -10,6 +10,10 @@
height: 80vh;
}
.navbar-toggler {
border: 0;
}
.btn-group {
margin-right: 10vw;
margin-bottom: 10vh;
@@ -163,8 +167,43 @@ footer#page-footer {
border-radius: 3.125rem;
}
.navbar .container {
display: flex;
padding: 0;
margin: 0;
}
.navbar-toggler {
padding: 0;
margin: 0;
width: 4rem;
left: 0;
}
.envelope-message {
position: absolute;
display: flex;
width: calc(100% - 8rem);
align-items: center;
justify-content: start;
margin-left: 4rem;
}
.envelope-message .icon {
margin-right: 0.5rem;
}
.envelope-message .message {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 550;
}
.logo {
width: 9rem;
position: absolute;
right: 0;
margin-right:2rem;
}
.none-display {
@@ -225,17 +264,58 @@ footer#page-footer {
}
/* styles for mobile responsiveness */
@media (max-height: 850px) {
.navbar .container {
display: flex;
padding: 0;
margin: 0;
}
.navbar-toggler {
padding: 0;
margin: 0;
width: 4rem;
left: 0;
}
.envelope-message {
width: calc(100% - 4rem -9rem);
}
.envelope-message .message {
font-size: 14px;
font-weight: 550;
}
.logo {
width: 9rem;
position: absolute;
right: 0;
margin-right: 2rem;
}
.card-text, .card-text {
font-size: 0.6rem; /* Font size reduced */
margin: 0rem;
padding: 0rem;
}
.highlight {
font-weight: 700;
font-size: 0.5rem;
}
.signature-process-title, .signature-process-name {
font-size: 0.7rem;
}
}
@media (max-width: 767px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-toggler {
transform: scale(0.75);
padding: 0;
}
.navbar-brand {
font-size: 0.5rem;
text-align: center;
@@ -243,14 +323,25 @@ footer#page-footer {
text-overflow: ellipsis;
}
.collapse .card-text, .collapsing .card-text {
font-size: 0.6rem; /* Font size reduced */
margin: 0rem;
padding: 0rem;
.envelope-message {
width: calc(100% - 4rem - 4.5rem);
margin-left: 3rem;
}
.sender-card .card-body {
padding: 0.5rem;
.envelope-message .message {
font-size: 12px;
font-weight: 550;
}
.envelope-message .icon {
margin-right: 0.1rem;
font-size: 1rem
}
.logo {
width: 5rem;
right: 0;
margin-right: 1rem;
}
.btn_group {
@@ -266,10 +357,6 @@ footer#page-footer {
display: none;
}
img {
max-width: 4rem;
}
.page {
margin-top: 1rem;
max-width: 90%;
@@ -279,29 +366,10 @@ footer#page-footer {
.page section {
max-width: 90%;
}
.highlight {
font-weight: 700;
font-size: 0.5rem;
}
.signature-process-title, .signature-process-name {
font-size: 0.7rem;
}
}
@media (max-height: 850px) {
.collapse .card-text, .collapsing .card-text {
font-size: 0.5rem; /* Font size reduced */
margin: 0rem;
padding: 0rem;
}
.highlight {
font-weight: 700;
font-size: 0.5rem;
}
.signature-process-title, .signature-process-name {
font-size: 0.7rem;
@media (max-height: 600px) {
.collapse {
height: 4rem;
}
}