merge: Master-Branch integriert

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -10,9 +10,8 @@
     height: 80vh;
 }
 
-.navbar .cursor-logo {
-    width: 7rem;
-    padding-top: 1rem;
+.navbar-toggler {
+    border: 0;
 }
 
 .btn-group {
@@ -167,8 +166,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 {
@@ -249,17 +283,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;
@@ -267,14 +342,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 {
@@ -290,10 +376,6 @@ footer#page-footer {
         display: none;
     }
 
-    img {
-        max-width: 4rem;
-    }
-
     .page {
         margin-top: 1rem;
         max-width: 90%;
@@ -303,29 +385,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;
     }
 }